WebPages & HTML … the sandwich analogy by L Chow.

Slides:

Advertisements

Similar presentations

HTML I. HTML Hypertext mark-up language. Uses tags to identify elements of a page so that a browser such as Internet explorer can render the page on a.

Advertisements

Designing Websites Using HTML and FrontPage A Typical Webpage View Source A webpage is a text file containing instructions to tell a computer how the.

Source: ojects/tabber/ ojects/tabber/

A guide to HTML. Slide 1 HTML: Hypertext Markup Language Pull down View, then Source, to see the HTML code. Slide 1.

ADAM AKESSON’S E-PORTFOLIO For the Thinking Through Computing Learning Community.

 Missing (or duplicate) semicolons can make the browser completely ignore the style rule.  You may add extra spaces between the properties/values to.

Unit 7 How do you make a banana milk shake? Section B.

Slide 1 Today you will: think about criteria for judging a website understand that an effective website will match the needs and interests of users use.

Basic HTML Hyper text markup Language. Lesson Overview  In this lesson, you will learn to:  Create Lists  Horizontal rule (line)  Create a page for.

HTML Overview Part 2 – Paragraphs, Headings, and Lines 1.

Define html document byusing Example : Title of the document The content of the document......

Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies.

 ult.htm ult.htm  This website illustrates the use of CCS (style sheets)

Eat Your Words! Creating webpage Layout. CONTENT The Layout of a Webpage HEADER FOOTER Each of these sections represents a ‘div’ (or divider). By linking.

Basic HTML Hyper text markup Language. Re-cap  … - The tag tells the browser that this is an HTML document The html element is the outermost element.

Creating your Webpage with tables. This is a 2 column by 1 row table!

Linking Images to Other Areas within a Blackboard Course Darek Sady.

Intro to Dreamweaver Web Design Section 7-1 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course.

HTML (continued). Assignment 3 Creating a web page with:  Images  Hyperlinks to some websites  Hyperlinks to your  Information about a company,

Computing Theory: HTML Year 11. Lesson Objective You will: o Be able to define what HTML is - ALL o Be able to write HTML code to create your own web.

Hypertext Mark-Up Language Web Page Creation HTML.

INTRODUCTION TO HTML5 Semantic Layout in HTML5.  The new semantic layout in HTML5 refers to a new class of elements that is designed to help you understand.

Chapter 2 Web Page Design Mr. Gironda. Elements of a Web Page These are things that most web pages use.

McLean HIGHER COMPUTER NETWORKING Lesson 5 HTML Description of HTML web page Creating a simple HTML web page.

WEB DESIGN. warming up WEB DESIGN  Look at the HOMEPAGE OF YAHOO on page 56  Answer the following questions: 1) Why do people create and publish web.

HTML ( HYPER TEXT MARK UP LANGUAGE ). What is HTML HTML describes the content and format of web pages using tags. Ex. Title Tag: A title It’s the job.

Styling in HTML PowerPoint How to style in HTML. Styling in HTML Styling tags can be added to HTML to place emphasis or add appeal – These tags must be.

Web Design. How do web pages work? Webpages are written in a code called HTML. Programs like Internet Explorer read the code, and then show it as a web.

HTML. Hyper Text Markup Language Markup your text document The markup is the tag Hyper text means you can jump from place to place.

HTML Basic. What is HTML HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it.

Quick Questions 1. What does HTML stand for? 2. What are the three main languages of the Web? 3. What is the purpose of the tags? 4. Why do we indent different.

DYNAMIC HTML What is Dynamic HTML: HTML code that allow you to change/ specify the style of your web pages. Example: specify style sheet, object model.

The Expression Web Environment Module 5: Beyond the Basics with Expression Web LESSON 1.

Miguel Lara, PhD. 1:10 – 1:15 Pre-test 1:15 – 1:30 Course overview 1:30 – 2:00 Setting up DW Site 2:00 – 2:05 > 2:05 – 2:55 Hands-on Lecture 2:55 – 3:00.

Are You Smarter Than a 5 th Grader? 1,000,000 5th Grade HTML 5th Grade Syntax 4th Grade HTML 4th Grade Syntax 3rd Grade HTML 3rd Grade Syntax 2nd Grade.

Web programming Part 1: HTML 由 NordriDesign 提供

Headings are defined with the to tags. defines the largest heading. defines the smallest heading. Note: Browsers automatically add an empty line before.

The Writing Process. Which looks yummier? Which sandwich will your paper look like?  Each sandwich serves as an analogy for the contents of your written.

External Style Sheets Exploring Computer Science – Lesson 3-6.

1 Preparation for site Create a folder in MyDocuments: beavercheese. Create a subfolder, images Classes, career, DW beginner Download.

Basic Steps to create a Website using HTML5. Hypertext Markup Language.

Creating Your 1 st Web Page. Tags Refers to anything between on a webpage Most appear in pairs surrounding content Some appear as empty tags (no closing.

INTERNET VOCAB. WEB BROWSER An app for finding info on the web.

McGraw-Hill Technology Education © 2004 by the McGraw-Hill Companies, Inc. All rights reserved. Office Word 2003 Working Together 1 Word 2003 and Your.

Basic HTML Page 1. First Open Windows Notepad to type your HTML code 2.

HTML And the Internet. HTML and the Internet ► HTML: HyperText Markup Language  Language in which all pages on the web are written  Not Really a Programming.

Unit 7 How do you make a banana milk shake? Section B Period 2.

Source of website: “Text/css rel=“styles heet” This is an external style sheet link. This means that the.

Making the website. Get your folders sorted first Create a new folder in “N” called “My hockey website” Create folders inside called “Documents”, “images”

 Basic tags are the ones which defines the  General structure of the html document  These tags are a prominent part of a webpage. They enclose all.

HTML Basics Text, Images, Tables, Forms. HTML Structure HTML is comprised of “elements” and “tags” – Begins with and ends with Elements (tags) are nested.

Web Basics: HTML/CSS/JavaScript What are they?

Introduction to HTML:.

HTML – The COMPUTING UNLOCKED GUIDE

Intro to Dreamweaver Web Design Section 8-1

Uppingham Community College

HTML Robert McIntosh

Introduction to HTML5.

HTML Structure.

HTML – The COMPUTING UNLOCKED GUIDE

The structure and style of web pages

For the CIS17 course..

How to add a photo gallery in html/css

HTTP and HTML HTML HTTP HTTP – Standardize the packaging

1. Sequencers2. Actions or instructions First(ly)... Then... Next... After that... Finally...

Monday, Sept. 24 Today we are going to update the html code to html5. It has some new features that we have not covered yet.

Presentation transcript:

WebPages & HTML … the sandwich analogy by L Chow

Building a web page Is like making a sandwich

mustard lettuce meat tomato a simple sandwich BREAD Paragraph 4 Paragraph 2 Paragraph 3 Paragraph 1

mustard lettuce Ham tomato MULTI-GRAIN BREAD or a multi-layer sandwich BREAD Paragraph 4 Paragraph 1 Paragraph 2 MULTI-GRAIN BREAD mayonaisse Chicken Paragraph 3 Link 2 Link 1

unlike a sandwich zthe slices of bread are called tags zalmost all tags need a “matching slice” that ends the section. For example: … web page content

Sample HTML code for the browser … to control the look … a place for links; defined in the style section above … a place for main content; also defined in style Indent to show structure Add blank lines to separate sections Make sure your tags have... … end tags

No crossing lines ! for the browser … to control the look … a place for links; defined in the style section above … a place for main content; also defined in style

Now practice … with your first website assignment