Instructional Technology & Design Office [email protected] 217-244-4903 or 800-377-1892

Instructional Technology & Design [email protected]

217-244-4903 or 800-377-1892

HTML and CSS WorkshopPresented by Troy Babbs and Becca McGuire

Purpose + Learning objectives

Agenda:- Introduction of HTML- Basic code elements- Current code/design standards

Some Things you will need

1. A code editor- For Macintosh:

o Text Wrangler- For Microsoft Windows:

o Notepad++- Some simple-text editors will work (e.g., TextEdit)

2. A place to put your web page files on the Internet- I: Drive- Google Sites, Wix, Weebly- Web hosting service provider with domain name

You can also view HTML webpage files locally in your favorite web browser.

What is HTML?

HTML = HyperText Markup Language

Tim Berners-Lee created the first version in the late 1980s as a way to share research. HTML became standardized in November 1995 as HTML 2.0. The current standard is HTML5.

World Wide Web Consortium (W3C) is the international standards organization for the World Wide Web. W3C maintains the standards for HTML, CSS, XML, among many other languages.

Syntax of HTML

Each element has three components:• Tags are enclosed in angle brackets – <start

tag> </ end tag>• Attributes may be included in the start tag• Content is always placed in between the two

tags

<tagname attribute=“value”>content</tagname>

Basic construction of an html document

<!DOCTYPE html>

<html>

<head>

<meta charset=“utf-8”>

<title>Hello HTML World</title>

</head>

<body>

<p>Hello world!</p>

</body>

</html>

Head

Body

Starting an HTML Document

HTML document needs identity

NECESSARY OR NOT HTML!

Starting an HTML Document

All tags need to OPEN and CLOSE

MUST DO FOR EVERY TAG!

Starting an HTML Page

Have all tags in lower case. Avoid capitalization.

All content goes in the body.

Starting an HTML Page

Don’t pass the closing bracket.

Don’t cross after closing!

Headings

Different sizesUsed for titles, subtitles to create a hierarchy in the contentCan go from h1 (largest) to h6 (smallest)

HTML CodingWebsite Format

Headings

What is wrong with this picture?

Headings

All tags come in pairs!

Text Formatting Tags

These are some of the most common text formatting tags that add emphasis to your content.

<body>

<p><strong>Bold text</strong></p>

<p><em>Emphasized text</em></p>

<p><i>Italic text</i></p>

<p><u>Underlined text</u></p>

<p><del>Struckthrough</del></p>

<p><sup>Superscript</sup></p>

<p><sub>Subscript</sub></p>

</body>

Useful AttributesThe title attribute adds a tiny text pop-up to any HTML element. Search engines use this attribute to catalog your webpage as well as increase your search ranking. This attribute is most often used with images.

<body> <h1 title=“Hi!”>Big Title Heading Tag</h1></body>

Hypertext Reference (HREF)

A hypertext reference (href) is a link tag that directs a user to a valid URL.

<body> <h3>This is a hyperlink:</h3> <br /> <a href=“http://www.nytimes.com/”>NY Times</a></body>

Hypertext Reference (HREF)There are five different kinds of URLs you can use in the href attribute:

<a href=“http://www.uiuc.edu”>UIUC</a><a href=“../internal/index.html”>Homepage</a><a href=“#top”>Go to top</a><a href=“mailto:[email protected]?subject=“I need help”>GSLIS Help Desk</a><a href=“http://www.uiuc.edu/some_file.zip”>Download this file</a>

Comments

Comments are a way for you to make notes in your HTML code. They are never shown in the web browser. You can also comment out existing code instead of deleting it.

<body> <!–- This is a comment. It is not displayed. --> <p>This text is shown in the web browser.</p></body>

<body> <!–- This comment is temporarily removing this code.

<p>This text is shown in the web browser.</p> --></body>

Images

Almost every website uses images, and a website without images is pretty boring. The <img> tag does not have “content”. It is an empty element.

<body> <p>What is the plural of TARDIS?</p> <img src=“tardis.jpg” /></body>Images as link/anchor:<body> <a href=“../internal/some_file.html”> <img src=“tardis.jpg” /> </a></body>

Image Source URLSThe source of your images may be either global or local. But it is good practice to make them all local.

Src Attribute Code Explanation

src=“tardis.jpg”

src=“imgs/tardis.jpg”

src=“../tardis.jpg”

src=“../imgs/tardis.jpg”

src=“http://www.uiuc.edu/tardis.jpg”

Image is located in the same directory

Image is located in the imgs directory

Image is located “up” a directory

Image is located “up” a directory in another directory called imgs

Image is located at a specific URL elsewhere; this is known as a “global” location

Attributes of the <img> tag

<img src=“tardis.jpg” width=“220” height=“293” />

You can specify the exact width and height of the image.

Two things to note about specifying the dimensions of an image:

• Always use the same ratio of width to height• Always scale downward – bigger images scale down nicely, but

smaller images will become pixelated if you make them much bigger

The alt (alternative) attribute allows you to display alternate text if the image does not load for some reason.

<img src=“tardis.jpg” alt=“The TARDIS” />

Unordered ListsThere are different types of lists in HTML.

The unordered list is named so because its items are not numbered. Its items are displayed with bullet points.

<body> <h3>Today’s Task List</h3> <ul> <li>LIS501 homework</li> <li>LIS506 assignment</li> <li>Exercise</li> <li>Do the cleaning</li> </ul></body>

Ordered Lists

<body> <h3>Goals</h3> <ol> <li>Finish school</li> <li>Get a job</li> <li>Make money</li> <li>Get own place</li> </ol></body>

The items of an ordered list are numbered.

List AttributesFor unordered lists, you can specify which type of bullet point you would like by using the type attribute in the ul tag.

<ul type=“circle”> […] </ul><ul type=“square”> […] </ul><ul type=“disc”> […] </ul>

For ordered lists, you can pick a starting number other than 1 by using the start attribute.

<ol start=“3”> […] </ol>

If you want something other than numbers in the ordered list, you can choose among a few other options like alphabetical or roman numerals.

<ol type=“a”> […] </ol> <ol type=“i”> […] </ol>

<ol type=“A”> […] </ol> <ol type=“I”> […] </ol>

What is CSS?

CSS = Cascading Style Sheet

CSS files are separate from HTML files, but they are “included in” the HTML file.

It is best practice to use CSS for all formatting in your HTML files. This is the current trend….

Some HTML tags are becoming depreciated because of CSS. A few examples:

- <font> - Lists: <ul>, <il>, …- <table> as used for main content structure- Align attribute and other formatting attributes

<Div> Element

The <div> element is nothing more than a container. Web developers now use <div> elements to arrange content on webpages instead of <table> elements.

This will become important to you once you’ve learned more CSS.

<div id=“someDIV” name=“someDIV” title=“DIV Element”> </div>

<div> elements can be nested in one another.

Linking Your css and html

<!DOCTYPE html>

<html>

<head>

<meta charset=“utf-8”>

<title>Hello HTML World</title>

<link rel="stylesheet" type="text/css" href="theme.css">

</head>

<body>

<p>Hello world!</p>

</body>

</html>

Sample CSS code

#leftcolumn {

position: absolute;

top: 110px;

left: 5px;

width: 150px;

height: 150px;

font-family: Verdana,Arial,Helvetica,sans-serif;

font-size: 10px;

text-align: left;

font-weight: bold;

background-color: #ffffff;

color: #000000;

}

Browser Tools

Use built-in browser tools to see how sites work:

Ctrl or Command + U will display the source code in most browsersRight-clicking or Ctrl-clicking and selecting “Inspect Element” will usually reveal the code for a particular object

Validators & Accessibility tools

http://validator.w3.org/ HTMLhttp://jigsaw.w3.org/css-validator/ CSShttp://fae.cita.uiuc.edu/ Accessibilityhttp://wave.webaim.org/ Accessibility

http://validator.w3.org/



http://jigsaw.w3.org/css-validator/

http://jigsaw.w3.org/css-validator/

http://fae.cita.uiuc.edu/

http://wave.webaim.org/

Questions, comments, concerns…

Thank you for listening!GSLIS also offers a HTML workshop via Blackboard Collaborate

(March and April)

Additional info for learning HTML and CSS:W3C Tutorials

http://www.w3schools.com/css

Lynda Tutorials

http://go.illinois.edu/lynda

Stack Overflow

http://stackoverflow.com/

Code Academy

http://www.codecademy.com/

30 Days to Learn

https://courses.tutsplus.com/courses/30-days-to-learn-html-css










https://courses.tutsplus.com/courses/30-days-to-learn-html-css

Questions, comments, concerns…

Thank you for attending our workshop!Check out these resources to teach yourself more about web design: urli.st/moo

Contact GSLIS Help Desk:[email protected]

Feedback is always appreciated!http://go.illinois.edu/itdfeedback

http://go.illinois.edu/itdfeedback

Instructional Technology & Design Office [email protected] 217-244-4903 or 800-377-1892

Documents