Wdv 101 intro to website development
1 / 30

WDV 101 Intro to Website Development - PowerPoint PPT Presentation

  • Uploaded on

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

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'WDV 101 Intro to Website Development' - terah

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
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
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
Webpage Structure - 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>



Webpage structure head
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)


      <title>My First Webpage</title>


Webpage structure body
Webpage Structure - Body

  • Body tag is used to hold the main displayed content of the page.


    Hello world!


Building a webpage lab
Building a Webpage - Lab

  • Open Notepad

  • Type the following and save as firstpage.html

    <!DOCTYPE html>



    <title> My First Webpage</title>



    Hello World!



Wdv 101 intro to website development

  • 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
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
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
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
More Tags – Comment Tag

  • Comments

    • Ignored by the browser (for humans)

    • Format like <!-- -->

      <!-- This text is ignored -->

      <!-- This


      is also Ignored


    • Homework needs to be formatted with comments



      Tutorial #, Case Problem #



More tags heading style
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
Heading - Lab

  • Modify your first page. Add:

    <h1> Title</h1>



    <h4>Home town</h4>

More tags
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
Nested tags

  • When there multiple tags formatting content it is important to properly nest the tags

  • Two or more effects can be nested like:



    <p> My name is <strong>Matt</strong> and my favorite color is <em>blue</em></p>

More tags special characters
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;

More tags lab
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 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” />


  • 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”


    alt=“Picture of my Puppy”


    width =“25px;”

    title=“My Dog” />

Images organization
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
Images – Lab

  • Go to the following link


  • 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
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
Creating Lists – Unordered List

  • Unordered list has the <ul> tag for the list and <li> for the list items.


    <li> Coke </li>

    <li> Pepsi </li>


  • Lists can be nested as well


    <li> Coke


    <li> Diet </li>

    <li> Cherry </li>




Creating lists ordered list
Creating Lists – Ordered List

  • Uses the <ol> tag for the ordered list and the <li> tag for the list items


    <li>Open Notepad </li>

    <li>Create a new page </li>


Creating lists description list
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



    <dd>Des Moines Area Community College</dd>



    Des Moines Area Community College

Creating lists lab
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:


    Des Moines Area Community College

More tags break and meta
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


      <meta name=“name of category” content=“content data”/>


Wdv 101 intro to website development

  • 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
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:


  • Can paste in code, upload a file, or point it to a URL