Download presentation
Presentation is loading. Please wait.
1
HTML Tags and Structure
Photo Credit: Code For Her - Fall 2018 Joslenne Pena Katie O’Leary
2
Tags
3
<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
4
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
5
Attribute Tags <a href=" 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=" alt="Doge"> This is for images already hosted online
6
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
7
<header> A group of introductory or navigational aids: title, navigation links, etc. Not to be confused with <head> or the different headings.
8
<nav> A section of the page that links to other pages or to parts within the page. Often found in the <header> tag
9
<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.
10
<figure> More semantics than <img>. Can include:
11
Special Characters Yes – they exist in case you actually want to display brackets or anything else and not tags < > …. <! > comments
12
Audio / Video These elements are new – intended to make things more interactive
13
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.
14
Remember…
15
Let’s try these tags!
16
Project Brainstorm Portfolio Fun / Novelty For your course Blog
Cat website For your course Blog Gallery or slideshow Animation / canvas
17
Acknowledgements/Contributions
These slides are Copyright Colleen van Lent as part of 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
18
For Fun Wayback Machine
19
Safari / Gitlab Does have inspect element
ement&rlz=1C1GCEA_enUS813US813&oq=does+safari+have+inspe ct+element+&aqs=chrome..69i j0j7&sourceid=chrome&ie=U TF-8
Similar presentations
