Artistic Web Applications - Week3 - Part 3
•Download as PPTX, PDF•
1 like•1,528 views
Artistic Web Applications - Week3 - Part 3
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Artistic Web Applications - Week3 - Part 3
Similar to Artistic Web Applications - Week3 - Part 3 (20)
More from Katherine McCurdy-Lapierre, R.G.D.
More from Katherine McCurdy-Lapierre, R.G.D. (11)
Recently uploaded
Recently uploaded (20)
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!