PRESENTED BY: CARY-ANNE HTML AND WEB DESIGN. HTML Browsers Tags: What are they?, Common Tags Lists Links and Anchors Images DIVs Validation WHAT WE’LL

PRESENTED BY:CARY-ANNE

HTML and Web Design

•HTML• Browsers• Tags: What are they?, Common Tags• Lists• Links and Anchors• Images•DIVs• Validation

WHAT WE’LL COVER

Hyper Text Markup Language – the building blocks of web pages

HTML documents contain plain text (what you want displayed) and HTML tags (instructions on how to display text)

HTML Document = Web PageMany HTML Documents = Web Site

Web browser (Firefox or Chrome, for example) reads the HTML document and displays it to user

What is HTML?

• The .html file extension tells the browser that it is reading an HTML document

sample_index.html

NOW, we can:1. Download resume.txt (right click and save as) from:

http://tinyurl.com/htmlbootcamp2. Open resume.txt in notepad++ (PC) or TextEdit (mac)3. Save the file to the desktop as resume.html – be sure to

change the file extension!

Web Browsers

Each tag has a different meaning/gives browser different instructions for how to display content

Keyword surrounded by angle brackets

Most tags come in pairs• Opening/start tags => <html>• Closing/end tags => </html>

What is a tag?

• <html> - html document goes here </html>• <head> - metadata • <title> - this is the info that appears in the browser tab; part of the

<head>• <body> - contains the content of the page that is displayed in the

browser• <h1> - heading, displayed large and bold

• <h2> - second level heading• <h3> - third level heading• … <h6>

• <p> - each paragraph framed by this tag• <strong> - bold• <em> - italics

Look up tags that you don’t know at W3 Schools Web site: http://www.w3schools.com/tags/default.asp

For now, just refer to your trusty handout.

Common tags

<opening_tag>surround the appropriate text</closing_tag>

<p>This is sentence one in my sample paragraph.This is sentence two an the following text

<strong>bold</strong>.</p>

As it appears in the browser:This is sentence one in my sample paragraph. This is sentence

two and the following text is bold.

Tags should nest! First in, last out (FILO)

HTML tag rules

There are 2 kinds of lists in HTML:1.Unordered lists - which denotes each item with bullet points

Example:<ul> Begin your unordered list

<li>Item</li> Every list item has its own tag<li>Item</li><li>Item</li>

</ul> Close your unordered list

Lists

When viewed in your browser, your unordered list would look like this:

ItemItemItem

LISTS (CONT’D)

2. 0rdered lists - which rank items by denoting each list item with a number.

Example:<ol> Begin your ordered list

<li>Item</li> Every list item has its own tag<li>Item</li><li>Item</li>

</ol> Close your ordered list

LISTS (CONT’D)

When viewed in your browser, your ordered list would look like this:

1.Item2.Item3.Item

Ordered Lists

<a> = link tag, or ‘anchor’ tag requires a closing tag. The anchor element can be used to:

1. Create a link to another document, including web page documents, by using the href attribute

2. Create a link to generate an email message

<a href=“http://www.google.com” title=“google”>link to google</a>

Attributes: href and title Give the browser extra information, like where it should go

when a user clicks

Adding links and anchors

<img> is a self-closing tag and requires the source attribute (src=“wherever_the_image_is_from”)

Tags can have multiple attributes:

< img src=“http://stylishcuisine.com/wp-content/uploads/oatmeal-choc-chip-cookies.jpg” alt= “Picture of oatmeal chocolate chip cookies in an orange serving dish” />

alt attribute is important for accessibility.

Adding images

Comments - blocks of text that do not get read or displayed by the browser

Valuable for:1. Writing notes 2. Making code easier to read 3. Removing chunks of code temporarily

Open “”

Ex. 

Comments: Your new best friend

These two tags do not style things on their own. They are just for grouping and allowing reuse of styling via CSS. Usually include classes and ID attributes to enable CSS styling…

<div> tags: indicate a division or section of an HTML document Used to group things together for styling purposes (CSS!) Block-level element

<span> tags: inline element allowing you to style the content inside the span separately from the rest of the content

DIVs and spans

Running your code through a validator will reveal errors and information about accessibility

Validator: http://validator.w3.org/

Check for broken links: http://validator.w3.org/checklink

Validation

W3schools: http://www.w3schools.com/Tutorials and reference for HTML

Usability.gov: http://www.usability.gov/Guidelines for usability

iSchool Tutorials:http://www.ischool.utexas.edu/technology/tutorials

Resources

1. Open SSH Secure File Transfer Client on PC or Fetch on a Mac

2. Log into login.ischool.utexas.edu3. Drag the HTML file that you have created into

your public_html folder4. View your page in a browser at the URL:http://www.ischool.utexas.edu/~username/

filename.html

Uploading File To Server