HTML 1 CS 337 - Web Programming University of Arizona - Spring 2014
Day 1 Review There are four main technological elements used in a majority of websites Design Interaction Logic Database (HTML & CSS) (JavaScript) (PHP/ (MySQL/ ASP.NET/ SQL Server/ Java) Oracle) CS 337 - Web Programming University of Arizona - Spring 2014
Learning Objectives • At the end of this lesson you should be able to: o Explain how to use comments, the concept of elements and tags, and indention o Name, explain the purpose, and provide the correct order of the required declarations and elements of an HTML document o Explain the difference between block elements and inline elements and two generic tags that represent them. CS 337 - Web Programming University of Arizona - Spring 2014
HTML Pages Naming a file: • End with .html • No spaces • Only alpha-numeric characters for best results • Can use dashes – • example.html • example-page.html CS 337 - Web Programming University of Arizona - Spring 2014
Comments Browser View Comments are started with a <!-- and end with --> Example: <!-- This is a comment --> CS 337 - Web Programming University of Arizona - Spring 2014
HTML Tags • HTML is a markup language • This means that it is a language designed to be machine-readable • All design elements of an HTML page use tags with the ability to define attributes and the text in the element • A tag is represented by < and > • Tags should be lowercase CS 337 - Web Programming University of Arizona - Spring 2014
HTML Tags • For example, if I wanted to tell the machine reading my page that I want it to define paragraph, I would put the word paragraph in a tag • Example: <paragraph> CS 337 - Web Programming University of Arizona - Spring 2014
HTML Tags • All tags should be closed so the machine knows where the end of the tag is • Tags are closed similarly to how they are opened except there is a / before the name of the tag • Together, these make an HTML element • Example: <paragraph> </paragraph> CS 337 - Web Programming University of Arizona - Spring 2014
HTML Tags Browser View • The text you put between the opening and closing tags (inside an element) is displayed to the user • Example: <paragraph>Hello World</paragraph> CS 337 - Web Programming University of Arizona - Spring 2014
HTML Tags • You can also define attributes about an element by putting the attribute in the opening tag and defining it. • Example: <paragraph name="myParagraph"> Hello World </paragraph> CS 337 - Web Programming University of Arizona - Spring 2014
HTML Tags • As programmers try to use smaller names for standard tags so it is faster to type • In the case of a paragraph, p is used • Example: <p>Hello World</p> CS 337 - Web Programming University of Arizona - Spring 2014
Indentation Browser View • Elements can be nested • When nested, they should be indented by human readability <p>Hello World <p> Goodbye World </p> </p> CS 337 - Web Programming University of Arizona - Spring 2014
Learning Objectives • At the end of this lesson you should be able to: o Explain how to use comments, the concept of elements and tags, and indention o Name, explain the purpose, and provide the correct order of the required declarations and elements of an HTML document o Explain the difference between block elements and inline elements and two generic tags that represent them. CS 337 - Web Programming University of Arizona - Spring 2014
Learning Objectives • At the end of this lesson you should be able to: o Explain how to use comments, the concept of elements and tags, and indention o Name, explain the purpose, and provide the correct order of the required declarations and elements of an HTML document o Explain the difference between block elements and inline elements and two generic tags that represent them. CS 337 - Web Programming University of Arizona - Spring 2014
Required Elements • There are two required elements in an HTML document o <!DOCTYPE html> o <title> CS 337 - Web Programming University of Arizona - Spring 2014
Standard Elements • There are three standard elements in an HTML document o <html> o <head> o <body> CS 337 - Web Programming University of Arizona - Spring 2014
<!DOCTYPE html> • A very special, required element • Defines the document as an html document • No closing tag • Must be on the first line of the document CS 337 - Web Programming University of Arizona - Spring 2014
<title> Browser View • Required • Specifies the title of the document <!DOCTYPE html> <title>Example Page</title> CS 337 - Web Programming University of Arizona - Spring 2014
<html> • Specifies the portion of <!DOCTYPE html> the document that <html> contains html (which is <title>Example all of it) Page</title> • It represents the root of </html> the document so that there is an element that contains everything CS 337 - Web Programming University of Arizona - Spring 2014
<head> • Contains elements <!DOCTYPE html> about the HTML <html> <head> document itself <title> • Not for elements that Example should be displayed to Page the user </title> • There should only be </head> one head element </html> CS 337 - Web Programming University of Arizona - Spring 2014
<body> • Contains all of the elements designed to be displayed to the user • There should only be one body element CS 337 - Web Programming University of Arizona - Spring 2014
<body> <!DOCTYPE html> <html> <head> <title>Example Page</title> </head> <body> <p>Hello World!</p> </body> </html> CS 337 - Web Programming University of Arizona - Spring 2014
Recommended Elements • There are two recommended elements in an HTML document o <meta> o <meta> • Actually it is the same element used twice with different attributes CS 337 - Web Programming University of Arizona - Spring 2014
Recommended Elements • <meta charset="UTF-8" /> o Defines the character set of you HTML file • <meta name="description" content="This is an example page"> o Defines the description of the page to be used by search engines • There are other meta attributes that can be used, but aren’t as common CS 337 - Web Programming University of Arizona - Spring 2014
Meta Description CS 337 - Web Programming University of Arizona - Spring 2014
Header ... <head> <title>Example Page</title> <meta charset="UTF-8" /> <meta name="description" content="This is an example page"> </head> ... CS 337 - Web Programming University of Arizona - Spring 2014
Body Structure • While not required, there are some elements commonly used to structure the body of a website <header> <article> <nav> <aside> <section> <footer> CS 337 - Web Programming University of Arizona - Spring 2014
Body Structure CS 337 - Web Programming University of Arizona - Spring 2014
Partner Activity CS 337 - Web Programming University of Arizona - Spring 2014
Learning Objectives • At the end of this lesson you should be able to: o Explain how to use comments, the concept of elements and tags, and indention o Name, explain the purpose, and provide the correct order of the required declarations and elements of an HTML document o Explain the difference between block elements and inline elements and two generic tags that represent them. CS 337 - Web Programming University of Arizona - Spring 2014
Learning Objectives • At the end of this lesson you should be able to: o Explain how to use comments, the concept of elements and tags, and indention o Name, explain the purpose, and provide the correct order of the required declarations and elements of an HTML document o Explain the difference between block elements and inline elements and two generic tags that represent them. CS 337 - Web Programming University of Arizona - Spring 2014
Block vs. Inline • There are two types of display elements o Block o Inline CS 337 - Web Programming University of Arizona - Spring 2014
Block • If no width is set, will expand naturally to fill its parent container • Can have margins and/or padding • If no height is set, will expand naturally to fit its child elements • Will be placed below previous elements • Introduces a carriage return after CS 337 - Web Programming University of Arizona - Spring 2014
Block CS 337 - Web Programming University of Arizona - Spring 2014
Inline • Flows along with text content • Will not drop to the next line • Will ignore top and bottom margin settings, but will apply left and right margins, and any padding • Will ignore the width and height properties CS 337 - Web Programming University of Arizona - Spring 2014
Inline CS 337 - Web Programming University of Arizona - Spring 2014
Recommend
More recommend
