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 Insert Workshop Name Presented by Your Name Here

Beginning Web Design:an introduction to HTML and CSS Fall 2013 ITD Workshop

Purpose + Learning objectives • Scope: • Agenda: • Introduction of HTML/CSS • Basic code elements • Current code/design standards • Last 20 minutes: working on a webpage together

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, Weeble • 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.

Html as markup language • 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>

Basic html Tags

Text Tags • Heading Tags <h1>Heading 1</h1> -<h6>Heading 6</h6> • Used for titles, subtitles to create a hierarchy in the content • Inherent font-size with h1 the largest and h6 the smallest • Don’t skip heading numbers • Paragraph Tag <p>Text text text text </p> • Encompasses big blocks/paragraphs of text. Use a <p></p> for every paragraph/text block

Lists Unordered Lists : Bullet Pts. <ul> <li>List Item 1</li> <li>List Item 2</li> </ul> • Ordered Lists : Numbered <ol> <li>List Item 1</li> <li>List Item 2</li> </ol> Nested Lists <ul> <li>List Item 1</li> <ul> <li>Sub Item 1</li> <li>Sub Item 2</li> </ul> <li>List Item 2</li> </ul> List Item 1 • Sub Item 1 • Sub Item 2 List Item 2

Links • <a href=“http://www.uiuc.edu”>UIUC</a> • <a href=“../internal/index.html”>Homepage</a> • <a href=“#top”>Go to top</a> Set by <a name=“top”>This is the top</a>

Images <body> <p>What is the plural of TARDIS?</p> <imgsrc=“tardis.jpg” alt=“tardis” width=“220” height=“293” /> </body>

<Div> element <div> elements allow you to designate containers around elements that you want to control in CSS. IDs <div id=“someDIV”>  </div> Class <div class=“someotherDIV”>  </div>

What is CSS? • CSS=Cascading Style Sheet • CSS is used to describe the look and formatting of a markup language, such as HTML. • CSS was developed primarily to allow for a separation of the document content from the document presentation. • Benefits of separating content from presentation: • Improved accessibility • Cleaner webpages • More control over the look of the website • Easier to update

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>

CSS rules h1 {color: blue; font-size: 1em; } Selector Declaration Declaration {property: value;} Types of Selectors HTML Elements : h1 Div ID : #id Div Class : .class

Common CSS Declarations TEXT Font color {color: #efefef;} Font type {font-family: } Alignment {text-align: center;} {text-align: right;} {text-align: justify;} Indent {text-indent: 50px;} Layout Padding {padding: 10px;} Margin {margin-bottom: 10px} Border {border: 1px solid #000;} Background-color {background-color: #efefef;}

Comments Comments are a way for you to make notes in your code. They are never shown in the web browser. HTML Comments <body> <!–- This is a comment. It is not displayed. --> <p>This text is shown in the web browser.</p> </body> CSS Comments /* This is a comment in CSS.*/

Validators & Accessibility tools

Questions, comments, concerns… • Thank you for attending our workshop! • 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