1. Instructional Technology & Design Office itd@support.lis.illinois.edu 217-244-4903 or 800-377-1892 Beginning Web Design Presented by Laura Miller

2. Purpose + Learning objectives Agenda: - Introduction of HTML - Basic code elements - Current code/design standards - Go over file template

3. 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, Weeble - Web hosting service provider with domain name You can also view HTML webpage files locally in your favorite web browser.

4. 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.

5. 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

6. Basic construction of an html document Hello HTML World Hello world!

7. Common HTML Elements TextStructural -,, ListsLinks & Images Link Anchor Links: Text Link

8. Text Tags Heading Tags Heading 1 - Heading 6 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 Text text text text Encompasses big blocks/paragraphs of text. Use a for every paragraph/text block

9. Hello HTML World Title of Essay Name Date First Subtitle or Subsection First Paragraph Second Subtitle or Subsection Second Paragraph

10. Lists Ordered Lists : Numbered List Item 1 List Item 2 Unordered Lists : Bullet Pts. List Item 1 List Item 2 Nested Lists List Item 1 Sub Item 1 Sub Item 2 List Item 2 List Item 1 Sub Item 1 Sub Item 2 List Item 2

11. Hello HTML World Title of Essay Name Date First Subtitle or Subsection First Paragraph Second Subtitle or Subsection Second Paragraph Key Things: Key Thing 1 Key Thing 2

12. Links UIUC Homepage Go to top Set by This is the top

13. Hello HTML World Title of Essay /h1> Name Date First Subtitle or Subsection First Paragraph Second Subtitle or Subsection Second Paragraph Key Things: Key Thing 1 “http://www.keything.com Key Thing 2 Back to Top

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

15. Hello HTML World Title of Essay /h1> Name Date First Subtitle or Subsection First Paragraph Second Subtitle or Subsection Second Paragraph Key Things: Key Thing 1 “http://www.keything.com Key Thing 2 Back to Top

16. 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. -->

17. element elements allow you to designate containers around elements that you want to control in CSS. IDs Class

18. Hello HTML World Title of Essay /h1> Name Date First Subtitle or Subsection First Paragraph Second Subtitle or Subsection Second Paragraph Key Things: Key Thing 1 “http://www.keything.com Key Thing 2

19. 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

20. Linking Your css and html Hello HTML World Hello world!

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

22. 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;} Other Comments /* comment */

23. @charset "utf-8"; h1 {color: #0000FF; size: 2em; weight: 900; } h2 {border-bottom: 2px solid #0000FF; } p {text-indent: 50px; margin: 5px; } #top { padding-bottom: 10px; }.list { border: 1px solid #000000; }

24. 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

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

26. Questions, comments, concerns… Thank you for listening! GSLIS also offers a HTML workshop via Blackboard Collaborate. Additional info for learning HTML: 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 http://freecourses.tutsplus.com/30-days-to-learn-http://freecourses.tutsplus.com/30-days-to-learn-html-and-css/

27. 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