Artistic Web Applications - Week3 - Part 3
Download as PPTX, PDF1 like1,544 views
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.
More Related Content
Similar to Artistic Web Applications - Week3 - Part 3 (20)
![[Medicalstudyzone.com] 1. AIIMS NOV EMBER 2015 SOLVED PAPER.pdf](https://cdn.slidesharecdn.com/ss_thumbnails/medicalstudyzone-250904212000-ef4cbf83-thumbnail.jpg?width=560&fit=bounds)
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!