SlideShare a Scribd company logo

Artistic Web Applications - Week3 - Part 3

•Download as PPTX, PDF•
•
Katherine McCurdy-Lapierre, R.G.D.
Katherine McCurdy-Lapierre, R.G.D.

This document provides an overview of common HTML tags that are frequently used, including tags for the document structure (<html>, <head>, <body>), page title (<title>), paragraphs (<p>), headings (<h1>-<h6>), and emphasis (<em>, <strong>). It also discusses file naming conventions and basic file structure for organizing website files and pages. The key tags covered are those needed for a basic website structure and formatting text.

Related slideshows

Web1O1 - Intro to HTML/CSS
Web1O1 - Intro to HTML/CSSWeb1O1 - Intro to HTML/CSS
Web1O1 - Intro to HTML/CSS
 
Lesson 2: Getting To Know HTML
Lesson 2: Getting To Know HTMLLesson 2: Getting To Know HTML
Lesson 2: Getting To Know HTML
 
HTML 5 Tutorial
HTML 5 TutorialHTML 5 Tutorial
HTML 5 Tutorial
 
1 of 15
HTML TAGS WE USE A LOT
TAGS WE USE A LOT <!DOCTYPE html> • The doctype instructs the browser to which version of HTML the code is written in • It must be typed just as it is above, it is case sensitive
TAGS WE USE A LOT <html></html> • The HTML tags instructs the browser that all of the code is HTML code
TAGS WE USE A LOT <head></head> • Contains information about the page • ie: The page title, meta tags, scripts, etc.
TAGS WE USE A LOT <title></title> • The title of the webpage
TAGS WE USE A LOT <body></body> • Everything within this tag is what we see on the page (paragraphs, images, lists, links, etc.)
TAGS WE USE A LOT • Below is a simple website structure using only the basic HTML tags • The same structure is needed for any webpage you create. <!DOCTYPE html> <html> <head> <title>Page title goes here</title> </head> <body> Everything you see in your web browser goes in here. Items like paragraphs, list, images, links, etc. </body> </html> • Indenting is used to show the opening and closing tags and structure of the page • It is not required to make the page work correctly – just makes it easier to view and edit!
HTML FILE STRUCTURE
FILE STRUCTURE What do I call my pages? • The homepage of most websites is often called “index”. • Depending on the language it might be index.html, index.php, index.asp... etc. • Most web servers are set up to look for the index.html file when loading the homepage • It can be set to something else – but would require some intervention with the server…
FILE NAMES What do I call my pages? • When naming your web pages you should always use lower case • Use the .html extension • Don’t use spaces or smiley faces in file names • Separate words or elements with a dash (-) E.g.: aboutus.html (ok) about-us.html (ok) about us.html (no) about*us.html (no) • Spacing or using certain characters in a name can cause display errors or break a site entirely
FILE STRUCTURE How do I organize my site? • Every file for a website has to be contained in one folder, our site “Root Folder” • You can have sub folders, but all site assets (images, scripts, css) have to be reside in one main folder (or in sub folders of that folder…) • The “ROOT” folder is the main folder that houses all of your files including the sub folders • In Dreamweaver, save the file you have open onto your memory stick in a folder called “Website” (your new root folder!)
TYPICAL FILE STRUCTURE Root folder Sub folder HTML file
GREAT RESOURCE: W3C
TAGS TO TRY OUT <p></p> Creates a new paragraph <br> Inserts a line break <hr> Inserts a horizontal rule <em></em> Emphasizes a word (with italic or bold) <strong></strong> Emphasizes a word (with italic or bold) Headings: <h1></h1> Creates headings <h2></h2> Creates second level headings <h3></h3> Creates third level headings <h4></h4> Creates forth level headings <h5></h5> Creates fifth level headings <h6></h6> Creates forth level headings
SIMILAR BUT DIFFERENT… • <em></em> Emphasizes a word (with italic or bold) • <i></i> Creates italic text • <strong></strong> Emphasizes a word (with italic or bold) • <b></b> Makes a word bold • Often <strong> renders as <b>, and <em> renders as <i> • However, there is a difference in the meaning of these tags: <b> or <i> defines bold or italic text only <strong> or <em> means that you want the text to be rendered in a way that the user understands as "important” • Today, all major browsers render strong as bold and em as italics • However, if a browser one day wants to make a text highlighted with the strong feature, it might be cursive for example and not bold!

More Related Content

Artistic Web Applications - Week3 - Part 3

  • 1. HTML TAGS WE USE A LOT
  • 2. TAGS WE USE A LOT <!DOCTYPE html> • The doctype instructs the browser to which version of HTML the code is written in • It must be typed just as it is above, it is case sensitive
  • 3. TAGS WE USE A LOT <html></html> • The HTML tags instructs the browser that all of the code is HTML code
  • 4. TAGS WE USE A LOT <head></head> • Contains information about the page • ie: The page title, meta tags, scripts, etc.
  • 5. TAGS WE USE A LOT <title></title> • The title of the webpage
  • 6. TAGS WE USE A LOT <body></body> • Everything within this tag is what we see on the page (paragraphs, images, lists, links, etc.)
  • 7. TAGS WE USE A LOT • Below is a simple website structure using only the basic HTML tags • The same structure is needed for any webpage you create. <!DOCTYPE html> <html> <head> <title>Page title goes here</title> </head> <body> Everything you see in your web browser goes in here. Items like paragraphs, list, images, links, etc. </body> </html> • Indenting is used to show the opening and closing tags and structure of the page • It is not required to make the page work correctly – just makes it easier to view and edit!
  • 9. FILE STRUCTURE What do I call my pages? • The homepage of most websites is often called “index”. • Depending on the language it might be index.html, index.php, index.asp... etc. • Most web servers are set up to look for the index.html file when loading the homepage • It can be set to something else – but would require some intervention with the server…
  • 10. FILE NAMES What do I call my pages? • When naming your web pages you should always use lower case • Use the .html extension • Don’t use spaces or smiley faces in file names • Separate words or elements with a dash (-) E.g.: aboutus.html (ok) about-us.html (ok) about us.html (no) about*us.html (no) • Spacing or using certain characters in a name can cause display errors or break a site entirely
  • 11. FILE STRUCTURE How do I organize my site? • Every file for a website has to be contained in one folder, our site “Root Folder” • You can have sub folders, but all site assets (images, scripts, css) have to be reside in one main folder (or in sub folders of that folder…) • The “ROOT” folder is the main folder that houses all of your files including the sub folders • In Dreamweaver, save the file you have open onto your memory stick in a folder called “Website” (your new root folder!)
  • 12. TYPICAL FILE STRUCTURE Root folder Sub folder HTML file
  • 14. TAGS TO TRY OUT <p></p> Creates a new paragraph <br> Inserts a line break <hr> Inserts a horizontal rule <em></em> Emphasizes a word (with italic or bold) <strong></strong> Emphasizes a word (with italic or bold) Headings: <h1></h1> Creates headings <h2></h2> Creates second level headings <h3></h3> Creates third level headings <h4></h4> Creates forth level headings <h5></h5> Creates fifth level headings <h6></h6> Creates forth level headings
  • 15. SIMILAR BUT DIFFERENT… • <em></em> Emphasizes a word (with italic or bold) • <i></i> Creates italic text • <strong></strong> Emphasizes a word (with italic or bold) • <b></b> Makes a word bold • Often <strong> renders as <b>, and <em> renders as <i> • However, there is a difference in the meaning of these tags: <b> or <i> defines bold or italic text only <strong> or <em> means that you want the text to be rendered in a way that the user understands as "important” • Today, all major browsers render strong as bold and em as italics • However, if a browser one day wants to make a text highlighted with the strong feature, it might be cursive for example and not bold!