Instructional Technology & Design Office itd@support.lis.illinois 217-244-4903 or 800-377-1892

Instructional Technology & Design Office itd@support.lis.illinois.edu 217-244-4903 or 800-377-1892 HTML and CSS Workshop Presented 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 • A code editor • For Macintosh: • Text Wrangler • For Microsoft Windows: • Notepad++ • Some simple-text editors will work (e.g., TextEdit) • 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 sizes • Used for titles, subtitles to create a hierarchy in the content • Can go from h1 (largest) to h6 (smallest) Website Format HTML Coding

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 Attributes • The 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:help@support.lis.illinois.edu?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> <imgsrc=“tardis.jpg” /> </body> Images as link/anchor: <body> <a href=“../internal/some_file.html”> <imgsrc=“tardis.jpg” /> </a> </body>

Image Source URLS • The source of your images may be either global or local. But it is good practice to make them all local. Src Attribute Code Explanation 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 src=“tardis.jpg” src=“imgs/tardis.jpg” src=“../tardis.jpg” src=“../imgs/tardis.jpg” src=“http://www.uiuc.edu/tardis.jpg”

Attributes of the <img> tag You can specify the exact width and height of the image. <imgsrc=“tardis.jpg” width=“220” height=“293” /> • 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. <imgsrc=“tardis.jpg” alt=“The TARDIS” />

Unordered Lists There are different types of lists in HTML. The unorderedlist 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 The items of an ordered list are numbered. <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>

List Attributes For 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=“i”>[…] </ol> <ol type=“a”>[…] </ol> <ol type=“I”>[…] </ol> <ol type=“A”>[…] </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 browsers • Right-clicking or Ctrl-clicking and selecting “Inspect Element” will usually reveal the code for a particular object

Validators & Accessibility tools • http://validator.w3.org/ HTML • http://jigsaw.w3.org/css-validator/ CSS • http://fae.cita.uiuc.edu/ Accessibility • http://wave.webaim.org/ Accessibility

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

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: help@support.lis.illinois.edu • Feedback is always appreciated! http://go.illinois.edu/itdfeedback

Instructional Technology & Design Office itd@support.lis.illinois 217-244-4903 or 800-377-1892