1 / 30

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

terah
Download Presentation

WDV 101 Intro to Website Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

  2. 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

  3. 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 />

  4. 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>

  5. 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>

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

  7. 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>

  8. 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.

  9. 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

  10. 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

  11. 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.

  12. More Tags – Comment Tag • Comments • Ignored by the browser (for humans) • Format like <!-- --> <!-- This text is ignored --> <!-- This text is also Ignored --> • Homework needs to be formatted with comments <!-- Name Tutorial #, Case Problem # Date -->

  13. 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

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

  15. 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

  16. 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>

  17. 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 &lt; or &#60;

  18. 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)

  19. 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” />

  20. 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” />

  21. 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.

  22. 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

  23. 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

  24. 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>

  25. 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>

  26. 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

  27. 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

  28. 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>

  29. 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” />

  30. 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

More Related