WDV 101 Intro to Website Development

WDV 101 Intro to Website Development Tutorial #1 Using HTML to Create Web Pages

HTML, XHTML, and CSS • HTML – HyperText Markup Language • The tags the browser uses to define the content of the page • XHTML – Extensible HTML • Set of standards applied to HTML • CSS – Cascading Style Sheets • Defines the formatting and placement

Webpage Structure • HTML uses tags • Key words wrapped in < > so when the browser renders the page it knows the text is a tag. • Tags have an open in and close <> </> • Format is <tag> content </tag> • <> is an open tag. </> is the closing tag • <body> </body> • Some single tags do not have a close. • <!DOCTYPE html> • Some tags are self closing tags (empty elements) • <br />

Webpage Structure - Doctype • DOCTYPE • Every HTML document should have a doctype tag • This tag identifies the version of HTML being used • With HTML5 the tag is <!DOCTYPE html> • HTML tag • Defines that everything inside is HTML • Put right after Doctype • Good habit to close tag right after you create it <!DOCTYPE html> <html> </html>

Webpage Structure - Head • Head tag • Comes after the html tag • Is not displayed • Container for the information about the document • Holds the <title> tag for the document title • Always make sure each page has a title • Can hold metadata (keywords, author, description) <head> <title>My First Webpage</title> </head>

Webpage Structure - Body • Body tag is used to hold the main displayed content of the page. <body> Hello world! </body>

Building a Webpage - Lab • Open Notepad • Type the following and save as firstpage.html <!DOCTYPE html> <html> <head> <title> My First Webpage</title> </head> <body> Hello World! </body> </html>

IDEs • Plain text (Notepad) • Most basic way. No color • Notepad ++ (http://notepad-plus-plus.org/) • Free • Works for lots of languages • Colors text for easy reading • Dreamweaver • Extremely powerful • Costs money • Autofills tags, gives suggestions, tons of options.

LAB - Notepad ++ • Download and install Notepad++ • http://notepad-plus-plus.org/ • Download tab (on right) then Download button • Find your file (firstpage.html) in Windows • Right Click the file and choose Edit with Notepad++ • Modify the text in the body to say Hello World! My name is _____ • Choose Run -> Launch in Firefox

Building a Webpage – On the Web • After we have created our basic page we can view it locally on a machine • To view on the web we would need to upload it to a server. • Filezilla • A handy tool to upload your webpages to the server

Server Case Sensitivity • Some servers are case sensitive. This means that capitol letters make a difference. • You might run into images, pages, styles, etc working properly locally but when uploaded to the web they do not display. Make sure the case is correct. • This is very important to remember through out the entire class (and after if doing web work) • Try to keep a common theme in your website. So if you like calling it FirstPage.html or firstpage.html try to keep it consistent.

More Tags – Comment Tag • Comments • Ignored by the browser (for humans) • Format like    • Homework needs to be formatted with comments

More Tags – Heading Style • Important code can be marked with headings • Format is <hn>content</hn> where n is a value of 1 through 6 where 1 is the biggest

Heading - Lab • Modify your first page. Add: <h1> Title</h1> <h2>Name</h2> <h3>Age</h3> <h4>Home town</h4>

More Tags • Paragraph tag • Identifies paragraph of texts • <p>content</p> • Strong Tag • Makes text Bold • <strong>content</strong> • Em Tag • Makes text in italics • <em>content</em> • Em and Strong effects can also be done with CSS

Nested tags • When there multiple tags formatting content it is important to properly nest the tags • Two or more effects can be nested like: <tag1><tag2>content</tag2></tag1> Example: <p> My name is <strong>Matt</strong> and my favorite color is <em>blue</em></p>

More Tags – Special Characters • Some characters can not be read by the browser in html. Since <> are used in tags how would you display it on the screen? • Special Characters can handle this. Format: &name; or &#number; Where name or number are set values. • See page 23 for a full list. • Less than is < or <

More Tags - Lab • Modify your first web page • Add a paragraph that says: “My name is Matt and my favorite color is Blue. 7 is < 10.” • Wrap your name with strong and your pet with em tags • Use the Less Than Special Character • Make 10 bold and italics (nested tags)

Images • Images are displayed on the webpage using the <img/> tag • This tag is a self closing tag (the book calls it an empty element tag) • Image tags require attributes to work correctly • Attributes are modifiers to a tag put inside the open tag with the format of attribute=“value” • For img the source of the file is required. This is done with the src attribute: <imgsrc=“filename.jpg” />

Images • alt = “Alternate text” • Used for when the image can not be found and also for web readers for visually challenged users. • title=“title text” • width = “width value” • height = “height value” <imgsrc=“filename.jpg” alt=“Picture of my Puppy” height=“25px;” width =“25px;” title=“My Dog” />

Images - Organization • It is a good practice to have all of your images in a separate folder (typically called images) • If the file name of the image is not in the same folder (locally and on the server) the path needs to be given <imgsrc=“images/picture.jpg” /> • It is good practice to size your images before putting them on the web. • It’s good habit to always put the alt attribute in.

Images – Lab • Go to the following link http://www.dmacc.edu/images/dmacclogo2009.gif • Right click on the image and do save as. Save the image in the same location as your first webpage • Add the image to your page using the img tag • Add alt, height, title, and width attributes

Creating Lists • Three types of lists • Unordered – Normal bulleted list • Ordered – A list with numbers or letters • Description – A term/description value pair with the description indented • All three types will have a nested tag describing the list type and the each list item

Creating Lists – Unordered List • Unordered list has the <ul> tag for the list and <li> for the list items. <ul> <li> Coke </li> <li> Pepsi </li> </ul> • Lists can be nested as well <ul> <li> Coke <ul> <li> Diet </li> <li> Cherry </li> </ul> </li> </ul>

Creating Lists – Ordered List • Uses the <ol> tag for the ordered list and the <li> tag for the list items <ol> <li>Open Notepad </li> <li>Create a new page </li> </ol>

Creating Lists – Description List • Also called a definition list. • Can be used for a glossary or chronology • Uses the <dl> tag for the description list, <dt> for the description term, and the <dd> tag for the description data <dl> <dt>DMACC</dt> <dd>Des Moines Area Community College</dd> </dl> DMACC Des Moines Area Community College

Creating Lists - Lab • Add an unordered list of multiple drink brands: • Coke • Pepsi • Add an ordered list of types of steps: • Open Notepad ++ • Create a new webpage • Add a definition list for DMACC: DMACC Des Moines Area Community College

More tags- Break and Meta • Break tag <br /> • Adds a blank line • Meta tags • Used for keywords that describe the page. These elements are not displayed. • Used by search engines • Placed in the <head> section • Has name and content attributes <head> <meta name=“name of category” content=“content data”/> </head>

Meta • Names • Keywords • Description • Author • Copy write <meta name=“keywords” content=“Puppies, Iowa, HTML”/> <meta name=“author” content=“Matt Hall” /> <meta name=“description” content=“This is my website about puppies, Iowa, and html” />

Validating the Code • HTML does not have a compiler like other languages • Validators can alert of possible errors and things that do not conform to the standards • Website: http://validator.w3.org/ • Can paste in code, upload a file, or point it to a URL

WDV 101 Intro to Website Development