html hyper text markup languagefaculty.wwu.edu/schadeb/dsgn360/website/images/html5.pdfhyper text...
TRANSCRIPT
![Page 1: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/1.jpg)
HTMLHyper Text Markup Language
![Page 2: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/2.jpg)
About
Home
Services
![Page 3: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/3.jpg)
about.html
index.html
services.html
![Page 4: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/4.jpg)
index.htmlHomepage =
![Page 5: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/5.jpg)
index.html
about.html
services.html
images
headshot.jpg
charlie.jpg
site root
![Page 6: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/6.jpg)
![Page 7: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/7.jpg)
A webpage built only with HTML is ugly
![Page 8: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/8.jpg)
![Page 9: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/9.jpg)
Therefore we must add CSS to give it structure and visual design
![Page 10: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/10.jpg)
![Page 11: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/11.jpg)
HTML Elements & Tags
![Page 12: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/12.jpg)
<h1>Hello world!</h1>Markup languages work by surrounding, or “marking up”, raw text with informaCon the computer can interpret.
![Page 13: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/13.jpg)
<h1>Headings</h1> <h2>Subheadings</h2> <video>Videos</video>
<p>Paragraphs</p> <li>Lists</li> <a>Links</a>
Each type of content must be labeled as a specific HTML element and sandwiched between and opening and closing tag.
![Page 14: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/14.jpg)
<p>Charlie is a my dachshund.</p>
Opening tag Closing tag
Raw text
![Page 15: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/15.jpg)
<div> <h1>Fun Fact</h1> <p>Charlie the dachshund weighs 13 lbs., while Boris the black cat weighs in at a whopping 30 lbs. Crazy.</p> </div>
These elements are oWen nested inside one another, with each containing informaCon about the type and structure of the informaCon to be displayed in the browser.
Remember: The order that you write your code is the order that content will be displayed in the browser.
![Page 16: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/16.jpg)
![Page 17: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/17.jpg)
![Page 18: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/18.jpg)
![Page 19: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/19.jpg)
![Page 20: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/20.jpg)
aarticleasidebrcanvascodedivDOCTYPEemfooterformh1, h2, h3, h4, h5, h6
headheaderhtmlhriframeimglilinklistsmetanavobject
olpscriptsectionspansmallstrongstyletabletitleul
![Page 21: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/21.jpg)
Basic Page Structure In order for the browser to render your code into a webpage, you need to setup
your file with a basic html structure.
![Page 22: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/22.jpg)
<!DOCTYPE html>
<html>
<head> <meta charset=“utf-8”> <title>Type Title Here</title> </head>
<body>
</body
</html>
![Page 23: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/23.jpg)
<!DOCTYPE html>You can let web browsers know that you are using HTML by starCng your document with a document type declaraCon.
![Page 24: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/24.jpg)
<html>
Anything between these tags will be interpreted as HTML code.
</html>
You can let web browsers know that you are using HTML by starCng your document with a document type declaraCon.
![Page 25: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/25.jpg)
<head> Content within the head will not be displayed in the browser, this space is for meta data. </head>
<body> Everything that you want the browser to render should be put into the body. This is essenCally the visible website. </body>
Inside the <html> tags there are two main containers:
<head> and <body>
Remember: The head always goes above the body
![Page 26: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/26.jpg)
<head> <meta charset=“utf-8”> <title>Dachshund’s Rule</title> <link href=“stylesheet.css” rel=‘stylesheet’ type=‘text/css’>
</head>
The content in the <head> element includes the character set, Ctle, and links to stylesheets, jQuery, and fonts.
![Page 27: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/27.jpg)
<body> <section>
<article> <h1>Smoothies</h1> <h2>These recipes will make you healthy.</h2> <p>For a limited time offer you can try these delicious smoothies for only $29.99 a month!! Don’t miss out on your only opportunity to get healthy in 2018.</p> <ul> <li>Bananas</li> <li>Strawberries</li> <li>Blueberries</li>
</article> </section>
</body>
When wriCng code, be sure to indent. It’s necessary for readability and is an industry standard, plus people will look at you funny if you don’t do it.
![Page 28: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/28.jpg)
<body> <section> <article> <h1>Smoothies</h1> <h2>These recipes will make you healthy.</h2> <p>For a limited time offer you can try these delicious smoothies for only $29.99 a month!! Don’t miss out on your only opportunity to get healthy in 2018.</p> <ul> <li>Bananas</li> <li>Strawberries</li> <li>Blueberries</li> </article> </section> </body>
Nope.
![Page 29: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/29.jpg)
HTML Body Elements
<header> used for introductory content and can contain any element except another header or footer.
<nav> contains the major navigational elements and is used by screen readers to identify main nav.
<article> a container for sections of content or can stand alone.
<sections> groups related content together, typically each section would get its own header (can be nested inside an article).
![Page 30: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/30.jpg)
<aside> when inside an article it can be used to contain information about an article—when outside an article it can be used as a container for information that is related to an entire page (i.e. side bar).
<figure> can be used to contain any content that is referenced from an article (mainly images and graphs).
<footer> footer that appears at the bottom of a page or a section and cannot contain another header or footer.
<div> a generic container that can be used for anything.
![Page 31: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/31.jpg)
Text Elements
<h1> <h1> <h1> <h1> <h1> <h1> the browser displays headings at different sizes with <h1> being the largest and the <h6> smallest.
<p> the browser will separate each paragraph on a new line and with some space between.
<hr> horizontal rule <br> line break
![Page 32: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/32.jpg)
Semantic Markup
Semantic markup provides extra information about the content (i.e. word emphasis, quotations, etc.)
<strong> strong emphasis (bold) <em> emphasis (italic) <small> fine print<blockquote> long quotes, indented paragraph<cite> italicizes a reference<code> code sample<span> allows you to apply an attribute to any snippet of content <del> strike through<ins> underlined<sup> superscript
![Page 33: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/33.jpg)
List Elements
<ul> unordered lists these lists utilize bullets
<ol> unordered lists these lists utilize numbers
<li> list item
![Page 34: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/34.jpg)
1. Bananas2. Strawberries3. Blueberries
• Bananas• Strawberries• Blueberries
<ul> <li>Bananas</li> <li>Strawberries</li> <li>Blueberries</li> </ul>
<ol> <li>Bananas</li> <li>Strawberries</li> <li>Blueberries</li> </ol>
![Page 35: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/35.jpg)
Element Attributes
Attributes provide additional information about the contents of an element. They appear in the opening tag of the element and are made up of two parts: a name and a value, separated by an equals sign.
<p id=“column”>A paragraph goes in here.</p>
![Page 36: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/36.jpg)
Images
<img> allows you to add an image to your website. It is an empty element meaning it doesn’t have a close tag.
<img src=“images/headshot.jpg”>
![Page 37: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/37.jpg)
Anchor tag (links)
<a> anchor tags are links to other websites, or to another page, section, or file within the same website..
<a href="http://www.yahoo.com">Click here</a>
<a href=“about.html">About</a>
Absolute url
RelaCve url
Text displayed
Text displayed
![Page 38: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/38.jpg)
File Organization
![Page 39: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/39.jpg)
index.html
about.html
services.html
images
headshot.jpg
charlie.jpg
site root
![Page 40: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/40.jpg)
Uniform Resource Locator (URL)
URLs—website addresses—contain information on where a particular file is in relation to the site’s root folder and what the browser should do with it. Each file on the internet has a unique URL.
http://www.healthyeating.com/recipes/smoothies/banana.html
ServerScheme Path File
![Page 41: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/41.jpg)
Absolute URLs show the entire path to the file—like a complete street address.
http://www.healthyeating.com/recipes/smoothies/banana.html
Relative URLs point to a file in a directory in reference to the current html page (i.e. banana.html is relative to www. healthyliving.com because it is located in the website’s same directory—or, folder):
/smoothies/banana.html/banana.html
![Page 42: HTML Hyper Text Markup Languagefaculty.wwu.edu/schadeb/dsgn360/website/images/HTML5.pdfHyper Text Markup Language About Home Services about.html index.html services.html Homepage =](https://reader031.vdocuments.mx/reader031/viewer/2022030502/5aae4bc17f8b9a25088c15e4/html5/thumbnails/42.jpg)
File Naming Best Practices
All lowercase No special characters (#$%_&”!) Be simple, yet specific No spaces (use a dash) Use file extension (.jpg, .png, .html, etc.)
bad... img_00738.jpg fruit pic.jpghome.html