HTML Tags and Structure Photo Credit: https://cdn-images-1.medium.com/max/600/1*pixFq7k28LKsABpDNRCjJw.png Code For Her - Fall 2018 Joslenne Pena Katie O’Leary
Tags
<h1>Here's a header!</h1> Common HTML Tags HTML elements are structured with a start tag and an end tag, with the content in between: <h1>Here's a header!</h1> In this case, 'h1' is the type of element we are creating. Always remember to close your tags! Here are some other important tags to remember: <html> and </html> - defines the whole document as an HTML document <body> and </body> - the actual content goes between these tags <!DOCTYPE html> <p> and </p> - the paragraph tag
Attributes Attributes provide additional information about an element Always specified in the start tag Attributes come in name/value pairs CSS styles for attributes – ( we go over this next week) class – applies special properties to groups of elements id – specifies a unique id to one element on the page
Attribute Tags <a href="http://www.yourlinkhere.com">link text</a> href is an attribute indicating the link address Some kinds of elements don't require an end tag: <br> - line break <img src="Documents/Pictures/cat.png" alt="Cat"> This is for images saved on your computer - make sure you know where the image is saved! <img src="http://i.imgur.com/81qyN1y.jpg" alt="Doge"> This is for images already hosted online
Anchor link You can use text or images as links to click to another area You can link to local files or web pages online You can use the # sign in case you have no link yet
<header> A group of introductory or navigational aids: title, navigation links, etc. Not to be confused with <head> or the different headings.
<nav> A section of the page that links to other pages or to parts within the page. Often found in the <header> tag
<footer> A section that contains info such as copyright data, related documents, and links to social media Typically at the bottom of the page, but not required.
<figure> More semantics than <img>. Can include:
Special Characters Yes – they exist in case you actually want to display brackets or anything else and not tags < > …. <!-- -- > comments
Audio / Video These elements are new – intended to make things more interactive
How to Design The most important step in web design is the design. You need a clear picture of what you want to create, before you can begin coding.
Remember…
Let’s try these tags!
Project Brainstorm Portfolio Fun / Novelty For your course Blog Cat website For your course Blog Gallery or slideshow Animation / canvas
Acknowledgements/Contributions These slides are Copyright 2015- Colleen van Lent as part of http://www.intro-webdesign.com/ and made available under a Creative Commons Attribution-NonCommercial 4.0 License. Please maintain this last slide in all copies of the document to comply with the attribution requirements of the license. If you make a change, feel free to add your name and organization to the list of contributors on this page as you republish the materials. Initial Development: Colleen van Lent , University of Michigan School of Information
For Fun Wayback Machine
Safari / Gitlab Does have inspect element https://www.google.com/search?q=does+safari+have+inspect+el ement&rlz=1C1GCEA_enUS813US813&oq=does+safari+have+inspe ct+element+&aqs=chrome..69i57.6143j0j7&sourceid=chrome&ie=U TF-8