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 content <> is an open tag. is the closing tag Some single tags do not have a close. Some tags are self closing tags (empty elements)

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 HTML tag Defines that everything inside is HTML Put right after Doctype Good habit to close tag right after you create it

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

Webpage Structure - Body Body tag is used to hold the main displayed content of the page. Hello world!

Building a Webpage - Lab 1. Open Notepad 2. Type the following and save as firstpage.html My First Webpage Hello World!

IDEs Plain text (Notepad) 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.

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

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

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

Heading - Lab Modify your first page. Add: Title Name Age Home town

More Tags Paragraph tag Identifies paragraph of texts content Strong Tag Makes text Bold content Em Tag Makes text in italics content 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: content Example: My name is Matt and my favorite color is blue

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

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” <img src=“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 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 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, 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 tag for the list and for the list items. Coke Pepsi Lists can be nested as well Coke Diet Cherry

Creating Lists – Ordered List Uses the tag for the ordered list and the tag for the list items Open Notepad Create a new page

Creating Lists – Description List Also called a definition list. Can be used for a glossary or chronology Uses the tag for the description list, for the description term, and the tag for the description data DMACC Des Moines Area Community College 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: 1. 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 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 section Has name and content attributes

Meta Names Keywords Description Author Copy write

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