A third paragraph.

Line breaks and spaces are both treated as a single space character. You could type: My First Page... but that is difficult to read when editing later. Save to your Desktop folder, then double-click the icon for the file when it appears on the desktop.">

A third paragraph.

Line breaks and spaces are both treated as a single space character. You could type: My First Page... but that is difficult to read when editing later. Save to your Desktop folder, then double-click the icon for the file when it appears on the desktop.">

Presentation is loading. Please wait.

Presentation is loading. Please wait.

Spring 2009 Kevin Cole Gallaudet University

Published byPosy Goodwin Modified over 6 years ago

Similar presentations

Presentation on theme: "Spring 2009 Kevin Cole Gallaudet University"— Presentation transcript:

1 Spring 2009 Kevin Cole Gallaudet University 2009.02.27
Web Design I Spring 2009 Kevin Cole Gallaudet University

2 page1.html <html> <head> <title>My First Page</title> </head> <body> <h1>My First Page</h1> <p>This is a <strong>simple</strong> <em>paragraph</em> on a <strong>simple</strong> <em>web page</em>.</p> <p>Another paragraph...</p> <p><img src="picture1.png" /></p> <p>A third paragraph.</p> </body> </html> Line breaks and spaces are both treated as a single space character. You could type: <html><head><title>My First Page</title></head>... but that is difficult to read when editing later. Save to your Desktop folder, then double-click the icon for the file when it appears on the desktop.

3 page1.html <html> <head> <title>My First Page</title> </head> <body> <h1>My First Page</h1> <p>This is a <strong>simple</strong> <em>paragraph</em> on a <strong>simple</strong> <em>web page</em>.</p> <p>Another paragraph...</p> <p><img src="picture1.png" /></p> <p>A third paragraph.</p> </body> </html> All tags begin with < and end with > Tags come in two varieties: - paired (start and end) - self-closing Paired tags use the same word or abbreviation for the start and end tag. End tags add a / to the start of the word or abbreviation - start tag <html> - end tag </html> Self-closing tags do not have an end tag. Instead they end with a / before the > - self-closing tag <img ... />

4 Tags <html>...</html> begin & end HTML docs
<head>...</head> contain "meta" data <title>...</title> shows in window top bar <body>...</body> page content <h1>...</h1> heading level 1 (big) <h6>...</h6> heading level 6 (small) <p>...</p> paragraph <strong>...</strong> usually boldface <em>...</em> emphasis (usually italic) <img ..../> image – no end tag End tags do not need to appear on the same line as the start tag that they match. Tags can appear inside other tags but must be properly "nested".

5 Proper "nesting" A "nested" tag pair is completely contained inside another tag pair <p>This is <strong><em>right</em></strong>.</p> <p>This is <strong><em>wrong</strong></em>.</p> Think of quote marks, parenthesis, and other paired symbols when writing English (and many other languages) Right: "The punctuation symbols (quotes and parenthesis) in this sentence are nested correctly." Wrong: "The punctuation symbols (quotes and parenthesis in this sentence are not nested correctly.") You should be able to draw lines connecting start and end tags without the lines intersecting.

6 Attributes provide information for a tag
some tags require attributes (img, a, meta) format: attribute="value" Img tag requires src="filename.ext" or src="URL" Uniform Resource Locator (URL) – fancy name for a web address <img src=" /> src identifies the source of an image. The image can be a file in the same folder as the the HTML document, or in another folder, or on another computer provides web pages (a web server). If the image file is located on the same computer as the HTML document, you do not need to include the name of the web server computer.

7 Uniform Resource Locator (URL)
http: protocol //dc.ubuntu-us.org/ web server computer name resources/ folder name tutorials/ folder name lab-tips.html file name Web browsers (Microsoft Internet Explorer, Firefox, Safari, Opera, Konqueror, Chrome, etc.) usually communicate with computers called web servers. Some web servers do more than just provide web pages. When a web browser requests a page from a computer, the protocol identifies what type of of "service" is being requested. For our class, the only important one is the HyperText Transport Protocol (HTTP) Other common protocols are https (secure), ftp (file transfer protocol), rss (really simple syndication) All computers on the Internet have a unique name and a number called an IP address Folders and file names are like on your computers.

8 style1.css h1 {font-family: verdana; font-size: 48px; color: red;}
p {margin: em 0;} img {border: thin solid green; padding: 5px;} Spacing is optional. It is more readable when information lines up nicely in columns. You could type: h1{font-family:verdana;font-size:48px;color:red;} p{margin:1.2em 0;} img{border:thin solid green;padding:5px;} but again, this is difficult to read. Save to the Desktop folder.

9 style2.css body {background: #ffffbf;} h1 {font-family: monospace;
font-size: 20px; color: blue;} p {margin: px; font-family: cursive; font-size: 16px;} img {display: none;} Save to the Desktop folder.

10 page1.html <html> <head> <title>My First Page</title> <link rel="stylesheet" type="text/css" href="style1.css" /> </head> <body> <h1>My First Page</h1> <p>This is a <strong>simple</strong> <em>paragraph</em> on a <strong>simple</strong> <em>web page</em>.</p> <p>Another paragraph...</p> <p><img src="picture1.png" /></p> <p>A third paragraph.</p> </body> </html> Add the line in red to your page1.html file. This links the page to the cascading style sheet named style1.css Double-click the newly edited file on your desktop or refresh your browser window.

Download ppt "Spring 2009 Kevin Cole Gallaudet University"

Similar presentations

HTML Basics Customizing your site using the basics of HTML.

HTML Basics Customizing your site using the basics of HTML.
CSS The basics { }. CSS Cascading Style Sheets - language used to – describe html appearance & formatting Style Sheet - file that describes – how html.

CSS The basics { }. CSS Cascading Style Sheets - language used to – describe html appearance & formatting Style Sheet - file that describes – how html.
Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.

Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.
HTML Introduction HTML

HTML Introduction HTML
Chapter 14 Introduction to HTML

Chapter 14 Introduction to HTML
Bayu Priyambadha, S.Kom. for long documents, you can even have links to other locations in that same document  … where ident is a variable for identifying.

Bayu Priyambadha, S.Kom. for long documents, you can even have links to other locations in that same document  … where ident is a variable for identifying.
Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction.

Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction.
Web Design I Spring 2009 Kevin Cole Gallaudet University 2009.02.22.

Web Design I Spring 2009 Kevin Cole Gallaudet University
Tutorial #2 Creating Links. Tutorial #1 Review Basic Page (DOCTYPE, HTML, Head, Title, Body) Tags Structure( ),,,,,, Nested Tags content Tag Attributes.

Tutorial #2 Creating Links. Tutorial #1 Review Basic Page (DOCTYPE, HTML, Head, Title, Body) Tags Structure( ),,,,,, Nested Tags content Tag Attributes.
Using Html Basics, Text and Links. Objectives  Develop a web page using HTML codes according to specifications and verify that it works prior to submitting.

Using Html Basics, Text and Links. Objectives  Develop a web page using HTML codes according to specifications and verify that it works prior to submitting.
1 CSC 121 Computers and Scientific Thinking David Reed Creighton University HTML and Web Pages.

1 CSC 121 Computers and Scientific Thinking David Reed Creighton University HTML and Web Pages.
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 

Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
Introduction to HTML. What is a HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup tags  The.

Introduction to HTML. What is a HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup tags  The.
Web Design I Spring 2009 Kevin Cole Gallaudet University 2009.02.27.

Web Design I Spring 2009 Kevin Cole Gallaudet University
HTML GUIDE Press F5 and then Click on the links on the left to get to the section you want Section 1: Getting Started Section 2: Moving Banner Section.

HTML GUIDE Press F5 and then Click on the links on the left to get to the section you want Section 1: Getting Started Section 2: Moving Banner Section.
Introduction to HTML : Hyper Text Markup Language.

Introduction to HTML : Hyper Text Markup Language.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.

HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring 2016 1.

Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
CIS 228 The Internet Day 2, 9/1/11 Hypertext. The Course Instructor: Bowen Alpern Office hour: GI 137-I, 4-5pm Tu.

CIS 228 The Internet Day 2, 9/1/11 Hypertext. The Course Instructor: Bowen Alpern Office hour: GI 137-I, 4-5pm Tu.
Tutorial #1 Using HTML to Create Web Pages. HTML, XHTML, and CSS HTML – HyperText Markup Language The tags the browser uses to define the content of the.

Tutorial #1 Using HTML to Create Web Pages. HTML, XHTML, and CSS HTML – HyperText Markup Language The tags the browser uses to define the content of the.

Similar presentations

Ads by Google