wdv 101 intro to website development
Skip this Video
Download Presentation
WDV 101 Intro to Website Development

Loading in 2 Seconds...

play fullscreen
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!



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


  • 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