Instructional Technology & Design Office or 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 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 – Attributes may be included in the start tag Content is always placed in between the two tags content

Basic construction of an html document Hello HTML World Hello world! 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) HTML Coding Website 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. Bold text Emphasized text Italic text Underlined text Struckthrough Superscript Subscript

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. Big Title Heading Tag

Hypertext Reference (HREF) A hypertext reference (href) is a link tag that directs a user to a valid URL. This is a hyperlink: NY Times

Hypertext Reference (HREF) There are five different kinds of URLs you can use in the href attribute: UIUC Homepage Go to top GSLIS Help Desk Downl oad this file

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. This text is shown in the web browser. <!–- This comment is temporarily removing this code. This text is shown in the web browser. -->

Images Almost every website uses images, and a website without images is pretty boring. The tag does not have “content”. It is an empty element. What is the plural of TARDIS? Images as link/anchor:

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 src=“tardis.jpg” src=“imgs/tardis.jpg” src=“../tardis.jpg” src=“../imgs/tardis.jpg” src=“ 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 tag 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.

Unordered Lists There 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. Today’s Task List LIS501 homework LIS506 assignment Exercise Do the cleaning

Ordered Lists Goals Finish school Get a job Make money Get own place The items of an ordered list are numbered.

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. […] For ordered lists, you can pick a starting number other than 1 by using the start attribute. […] If you want something other than numbers in the ordered list, you can choose among a few other options like alphabetical or roman numerals. […]

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: - - Lists:,, … - as used for main content structure - Align attribute and other formatting attributes

Element The element is nothing more than a container. Web developers now use elements to arrange content on webpages instead of elements. This will become important to you once you’ve learned more CSS. elements can be nested in one another.

Linking Your css and html Hello HTML World Hello world!

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 HTML CSS Accessibility 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 Lynda Tutorials Stack Overflow Code Academy 30 Days to Learn

Questions, comments, concerns… Thank you for attending our workshop! Check out these resources to teach yourself more about web design: urli.st/moourli.st/moo Contact GSLIS Help Desk: Feedback is always appreciated!