The Language of the Internet

HTML5 Hypertext Markup Language- Fifth iteration Used to create documents containing text, images, and hyperlinks Has Grammar and Vocabulary Defines Structure and Content Formerly defined style as well Tag- predefined element of HTML that alters the display of a page

Rules of HTML Two types of “tags” Container Tags- Come in pairs, contain content within This Text is Bold Empty Tags- standalone tags that are their own content Tags are written within “ ” called carrots A “/” defines end of tag CaSe InSeNsItIvE Bad Practice

Rules of HTML All HTML documents must start with a Document type declaration and an HTML tag Defines which version of HTML you’re using Tags can have modifiers to alter how they work Sample

WYSIWYG Editors “What You See Is What You Get” Provides graphical interfaces for building websites Simple and easy to use Clunky, buggy, never does what you want Adds excess or poorly written code Generally a bad idea

Text Editors ANY text editor can write HTML code Word is NOT a text editor Basic Text Editors Notepad TextEdit- Format >> Make Plain Text Advanced Text Editors Notepad++ SublimeText Dreamweaver Brackets

Structure of HTML Document Two main components Head Contains mostly unseen information for browser Connects to CSS, JS files Declares title of page Body Contains all content for page All text, images, and structure Structure gained by nesting- putting tags within tags

Head Comes after tag Must contain a Should be consistent and relevant across pages Often will contain a tag Connects Cascading Style Sheet and Javascript and tags can be used instead of linking to external page, - Unnecessary

Body Contains content to display Tags within are nested to provide structure for site Tags used within: Dozens and Dozens more

Sample Website Code Page Title This is a Heading This is a paragraph.

Images Necessary evils in websites Can provide visual aid and appeal Can make your site look like cheap junk Must be carefully aligned Should be small files and properly sized Are always copyright protected Fair Use clause allows educational use

Images Called a hotlink, goes to external page and pulls image from there Awful, Terrible, Horrible, Abysmal, Bad Idea If located in same folder as html document If located in images folder Excellent, Terrific, Brilliant, Amazing, Super Good Idea

Modifiers src= “Source” – what link the image is being pulled height= & width= Defines the height and width of the image. If only one is defined, image will scale other dimension

Hyperlinks Known as Anchors Index Page “Anchor Hyperlink REFerence Used to link pages to eachother both internally and externally href=“about.html” – Links to page on same site Called Relative Tag href=“ – Links to external site Called Absolute Tag

Modifiers href Where you want the user to go when they click your link target Where a link is to be opened target=“_self” – Opens in current window (default) target=“_blank” – Opens in new window or tab

Structure Tags Tags will come by default as either inline or block Block- puts content on its own line Inline- leaves content where it is Block Tags h1, h2, h3, h4, h5, h6 – “Header” tags div – “Division” tag p – “Paragraph” tag header, article, footer tags Inline Tags span – Does nothing (for now…)

Tables First Rule of Tables- we don’t talk about tables. Second Rule of Tables- we don’t talk about tables. Used for layout and structure in past Terrible, Awful, Horrible, Abysmal, Foul, Wrong, Abhorrent, Heinous, Horrid, Shameful, Loathsome, Revolting, Repulsive, and Generally Bad Idea Should only be used to display tabular data

More Useful Tags Comments Great for hiding incomplete or broken code Great for leaving reminders, notes, memos Lists - Unordered List (bullet points) - Ordered List (numbered) - List Item (item in an ol or ul) Most commonly used to create Navigation menus

More Useful Tags, - Bolds text, - Italicizes text - Underlines text - Highlights text - Strikethrough text - Small text, - Superscript and Subscript text - “Break” – Ends line and moves to next - “Horizontal Rule” - Adds line with break