1. PRESENTED BY: CARY-ANNE HTML AND WEB DESIGN

2. HTML Browsers Tags: What are they?, Common Tags Lists Links and Anchors Images DIVs Validation WHAT WE’LL COVER

3. Hyper Text Markup Language – the building blocks of web pages HTML documents contain plain text (what you want displayed) and HTML tags (instructions on how to display text) HTML Document = Web Page Many HTML Documents = Web Site Web browser (Firefox or Chrome, for example) reads the HTML document and displays it to user WHAT IS HTML?

4. The.html file extension tells the browser that it is reading an HTML document sample_index.html NOW, we can: 1.Download resume.txt (right click and save as) from: http://tinyurl.com/htmlbootcamp http://tinyurl.com/htmlbootcamp 2.Open resume.txt in notepad++ (PC) or TextEdit (mac) 3.Save the file to the desktop as resume.html – be sure to change the file extension! WEB BROWSERS

5. Each tag has a different meaning/gives browser different instructions for how to display content Keyword surrounded by angle brackets Most tags come in pairs Opening/start tags => Closing/end tags => WHAT IS A TAG?

6. - html document goes here - metadata - this is the info that appears in the browser tab; part of the - contains the content of the page that is displayed in the browser - heading, displayed large and bold - second level heading - third level heading … - each paragraph framed by this tag - bold - italics Look up tags that you don’t know at W3 Schools Web site: http://www.w3schools.com/tags/default.asp http://www.w3schools.com/tags/default.asp For now, just refer to your trusty handout. COMMON TAGS

7. surround the appropriate text This is sentence one in my sample paragraph. This is sentence two an the following text bold. As it appears in the browser: This is sentence one in my sample paragraph. This is sentence two and the following text is bold. Tags should nest! First in, last out (FILO) HTML TAG RULES

8. There are 2 kinds of lists in HTML: 1.Unordered lists - which denotes each item with bullet points Example: Begin your unordered list Item Every list item has its own tag Item Close your unordered list LISTS

9. When viewed in your browser, your unordered list would look like this: Item LISTS (CONT’D)

10. 2.0rdered lists - which rank items by denoting each list item with a number. Example: Begin your ordered list Item Every list item has its own tag Item Close your ordered list LISTS (CONT’D)

11. When viewed in your browser, your ordered list would look like this: 1.Item 2.Item 3.Item ORDERED LISTS

12. = link tag, or ‘anchor’ tag requires a closing tag. The anchor element can be used to: 1. Create a link to another document, including web page documents, by using the href attribute 2. Create a link to generate an email message link to google  Attributes: href and title  Give the browser extra information, like where it should go when a user clicks ADDING LINKS AND ANCHORS

13. is a self-closing tag and requires the source attribute (src=“wherever_the_image_is_from”) Tags can have multiple attributes: alt attribute is important for accessibility. ADDING IMAGES

14. Comments - blocks of text that do not get read or displayed by the browser Valuable for: 1.Writing notes 2.Making code easier to read 3.Removing chunks of code temporarily Open “<!--” Close “-->” Ex. <!--possible alternative for items in unordered : Snickerdoodles, Chocolate Chocolate Chip Cookies, White Chocolate Macadamia Nut Cookies --> COMMENTS: YOUR NEW BEST FRIEND

15.  These two tags do not style things on their own. They are just for grouping and allowing reuse of styling via CSS.  Usually include classes and ID attributes to enable CSS styling…  tags: indicate a division or section of an HTML document  Used to group things together for styling purposes (CSS!)  Block-level element  tags: inline element allowing you to style the content inside the span separately from the rest of the content DIVS AND SPANS

16.  Running your code through a validator will reveal errors and information about accessibility  Validator: http://validator.w3.org/http://validator.w3.org/  Check for broken links: http://validator.w3.org/checklink http://validator.w3.org/checklink VALIDATION

17.  W3schools: http://www.w3schools.com/http://www.w3schools.com/  Tutorials and reference for HTML  Usability.gov: http://www.usability.gov/http://www.usability.gov/  Guidelines for usability  iSchool Tutorials:  http://www.ischool.utexas.edu/technology/tutorials http://www.ischool.utexas.edu/technology/tutorials RESOURCES

18. 1.Open SSH Secure File Transfer Client on PC or Fetch on a Mac 2.Log into login.ischool.utexas.edu 3.Drag the HTML file that you have created into your public_html folder 4.View your page in a browser at the URL: http://www.ischool.utexas.edu/~username/filename.h tml UPLOADING FILE TO SERVER

19. Certain characters are interpreted by the browser as HTML code, so you cannot use them when writing text. These are called reserve characters and they have their own HTML symbol. Full list at W3 Schools: http://www.w3schools.com/tags/ref_entities.asp RESERVE CHARACTERS CharacterMeaningHTML syntax <<(less than) >>(greaterthan) &&(ampersand) “"(quotemarks) ‘&apos;(apostrophe)

20. A Professional Online Presence CSS TEMPLATES

21. What is HTML? Common tags Tag Rules FILO Lists Links Images Reserve Characters Comments Validation LET’S REVIEW:

22. Intro to CSS Choosing and Downloading a CSS template Modifying your template in Notepad++ or TextWrangler Uploading your web pages CSS STUFF WE’LL COVER:

23. HTMLCSS PurposecontentPresentation File type.html.css Syntax #div {property:value} Comments /* stuff */ DIFFERENCE BETWEEN HTML AND CSS

24. CSS SYNTAX

25. HTML REFERENCING CSS Web Portfolio #header { text-align:left; }

26. BUT HOW ARE THE TWO DOCUMENTS LINKED TOGETHER Start with an.html file Create a.css file (usually named style.css) Link your.css file to your html file in the header of your html file.

27. Compatibility Comments Copyright Comprehensible CHOOSING A TEMPLATE

28. Images Index HTML file License CSS WHAT COMES WITH MY TEMPLATE

29. HTML Web Portfolio CSS #header { text-align:right; } HTML REFERENCING CSS HTML CSS

30. CSS Task #1 Change the color of the link OR… The font of the link OR… Whether or not it’s underlined CSS Task #2 Make the text for the options on the side navigation menu italicized CSS TASKS

31. HTML #1 Add your name in the header on the top of the page Change the slogan to the right of your name HTML #2 Changing the options on the left side navigation bar to the following: Homepage, Resume, and Contact HTML TASKS

32. HTML #3 Make a copy of the index page, rename it as resume.html HTML #4 Change out the image HTML TASKS (CONT’D)

33. debugging tool future-proof quality check making it easier to maintain helps reinforce best practices professionalism Validator: http://validator.w3.org/ Broken link checker: http://validator.w3.org/checklink VALIDATION

34. http://nodethirtythree.com/free_tem plates.html http://www.freecsstemplates.org/ http://www.templatemo.com/ http://opensourcetemplates.org/ http://www.solucija.com/templates/f ree MORE TEMPLATES

35. W3Schools: http://www.w3schools.com/http://www.w3schools.com/ Tutorials and reference for HTML Usability.gov: http://www.usability.gov/http://www.usability.gov/ Guidelines for usability iSchool Tutorials: http://www.ischool.utexas.edu/technology/tuto rials RESOURCES