Download presentation
Presentation is loading. Please wait.
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
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) Notepad ++ (http://notepad-plus-plus.org/)
Most basic way. No color Notepad ++ ( Free Works for lots of languages Colors text for easy reading Dreamweaver Extremely powerful Costs money Autofills tags, gives suggestions, tons of options. Talk about NP++?
9
LAB - Notepad ++ Download and install Notepad++
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 Strong Tag Em 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 < or <
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) Maybe a Break?
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: <img src=“filename.jpg” />
20
Images <img src=“filename.jpg” alt=“Picture of my Puppy”
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” <img src=“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 <img src=“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
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 <li> Coke <li> Diet </li> <li> Cherry </li> </li>
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 (See lists.html)
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 <meta name=“keywords” content=“Puppies, Iowa, HTML”/>
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: Can paste in code, upload a file, or point it to a URL
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.