HitchHiker's Guide to HTML

HITCHHIKER’S GUIDE TO THE! HTML G L X,!! YING CHEN!!!!!!!!!!!!!!!!!!!! !!!!!

!! <H2> HELLO, WORLD </H2>!

STRUCTURE OF THISBOOKThis guide is divided into eight holy sectionsINTRODUCTION 2 7UNDERSTANDING HTML 14 17CREATE YOUR OWN 20WEBPAGE 21GLOSSARYREFERENCESINDEX TABLE OF CONTENTS 1!

1!INTRODUCTION HELLO ABOUT THIS BOOK IS IT HARD TO LEARN? HOW WEBSITES WORK INTRODUCTION 2!

HELLO Thank you for picking up this mini manual. It has been written with three specific people in mind: 1 My Professor (Shout out to Professor Nathaniel Williams) People who were forced to read this (I’m very sorry) Or all of the above If you are reading this on your free will, please consult your doctor immediately (I’m kidding). INTRODUCTION 3!

ABOUT THIS BOOK ! In this book, we’ll spend our time exploring HTML.! You’ll be introduced to HTML and its beauty. Which includes learning how browsers work, the structure of a website, and html tags. If this sounds intimidating, then this book is for you! ! WARNING I should warn you that you might get B-O-R-E-D. But hang on! It’s worth the read! ! INTRODUCTION 4!

IS IT HARD TO LEARN?!“HTML and CSS is hard.” WRONG!!The truth is, it is not that You can design your ownhard to learn. You don’t site, customize yourhave to be a computer Tumblr themes, improve“programmer” to create your communication withand design websites. All your ass ALL at the sameyou need is a thirst for time. Super cool right?knowledge and lots andlots of practice! In this manual, I’ve focused on the basics of the basics.Understanding HTML can By the end of this, you’llbenefit anyone who works know how to create your own little website.with web,!Tumblr, and orany other blogging site. ! ! ! INTRODUCTION 5!

HOW WEBSITES WORK! Before we look at the code, it’s essential to know the different ways in which websites are created and accessed.WHAT YOU SEE BEHIND THE HOW TO START SCENESWeb pages are accessed The only things you’ll need tothrough internet browsers Remember those times start is:(Chrome, Safari, Firefox) . when YouTube took ages to load? Well I do. Let’s 1. This manualThe purpose of a web take a look at what’s 2. Computerbrowser is to read HTML actually happening. Your 3. Web browserDocuments and display browser is slowly 4. Text editorthem as web pages. fetching the HTML and CSS from the server that (Dreamweaver, SubLime,The browser does not hosts the site. This may Brackets, Notepad,display the HTML tags, take a longer time TextEdit)but it uses the tags to depending on theinterpret the content of content and bandwidth I personally recommend thethe page and determine of their server. text editor named “Brackets”.how to display the By mentioning that, it is implieddocument. After fetching, the that you should install Brackets browser then translates or else I’ll take it very personally.HTML is understood by the HTML and CSS code I’m kidding (not kidding).several other platforms to visualize the page youlike mobile phones, see.! You can download it here: http://www.brackets.io/!search engines, and etc.! INTRODUCTION 6!

2!UNDERSTANDING HTML WHAT IS HTML WHAT ARE HTML TAGS HTML STRUCTURE UNDERSTANDING HTML 7!

UNDERSTANDING HTMLWHAT IS HTML HTML TAGSHTML stands for “Hypertext When writing, you add HTML tags to theMarkup Language”. This may plain text to create structure and hierarchy.sound intimidating, but it’s not. These tags, also known as HTML elements, will tell your browser how to display theYou can think of HTML as the text or graphic in the document.skeleton that gives every webpagestructure. HTML documents have Think of HTML tags as keywordsthe extension .html at the end of surrounded by angle brackets. Theythe file name. The document itself normally come in pairs like <b> and </b> .is considered a web page. NOTE: See Figure 1 for the anatomyThey are made up of plain text of a HTML tag.that is in-between two HTML tags:An opening tag and a closing tag. UNDERSTANDING HTML 8!

STRUCTURE!OF!HTML!TAGS! Below is the anatomy of a HTML tag. It consists of an opening tag and a closing tag. The character in between the left and right angle bracket represents the tag’s purpose. FIGURE 1 | ANATOMY OF A HTML TAG OPENING TAG CLOSING TAG <b> </b> ! RIGHT-ANGLE BRACKET CHARACTER ! ! FORWARD SLASH LEFT-ANGLE BRACKET ! ! In this case, the character stands for “bold”. Any text that lies in the middle of 9 the opening and closing tag appears bolded in the browser. ! UNDERSTANDING HTML!

FIGURE 2 | Example Webpage See HTML code in the next page. UNDERSTANDING HTML 10!

] HTML DESCRIBES THE! STRUCTURE HTML uses elements to describe the structural markup of the page. HTML elements is everything from the opening tag to the closing tag. Let’s take a closer look at an example. Below is a simple example of a HTML document. <!DOCTYPE html> <html> <head> <title> My first website </title> </head> <body> <h1> This is a Heading </h1> <p> This is a paragraph </p> <p> Another paragraph </p> </body> </html> The HTML tags, <h1> and <p>, describe the structural markup of the contents on the page. It tells the browser that “This is a Heading” is the main heading and tells the browser “This is a paragraph” and “Another paragraph” are separate paragraphs. See the example website in Figure 2 on the previous page. NOTE: The look of the heading, typeface, and size are set using a separate language called Cascade Styling Sheets (CSS). UNDERSTANDING HTML 11

The!HTML!Framework!In this section, we’ll explore and explain the general HTML framework that everyweb designer follows.! <!DOCTYPE> This tag must be the first thing on the page because it identifies what version of HTML the page uses. <HTML> Anything between the <html> tag is HTML code <head> This container provides metadata about the ! page (title, style, links, scripts). The content in the <head> section is not displayed in the browser. </head>! ! <body> The <body> container displays all the visible! content on a website. This includes text, images, videos, and links. </body> </HTML> NOTE: <!DOCTYPE> does not need a closing tag! UNDERSTANDING HTML 12

BODY!STRUCTURE! Let’s explore the body structure! The body contains all the content displayed on a website. This includes the navigation menu, text, images, and etc. ! < header > < nav > < section >< div > < aside >< article > < footer > TIP See the Glossary for the HTML tag definitions !! UNDERSTANDING HTML 13 12

3!CREATE YOUR OWN WEBPAGE STEP-BY-STEP INSTRUCTIONS SUMMARY! DO IT YOURSELF 14

STEP-BY-STEP INSTRUCTIONS1! To create your very first web page open Brackets under your Applications folder. This is available to download at www.brackets.io NOTE: You can also use the iOS text editor, TextEdit instead.2! Type the code shown to the right. Feel free to add or change the text. NOTE: You can experiment with different tags listed in the Glossary section3! Next go to the File >Save as… Choose your file destination folder and save this file as slim-shady.html4! Now start your browser, go to the File>Open. Find and select your file that you just created. Congrats You just created your first webpage!! DO IT YOURSELF 15

SUMMARY Browsers reads and displays HTML documents HTML provides a basic structure of a website HTML consists of tags and plain text Tags describe the structural makeup of the page. They come in pairs called opening and closing tags! DO IT YOURSELF 16

4!GLOSSARY HTML Structure Tags Section Division Tags Text Tags GLOSSARY 17!

GLOSSARY I.! HTML STRUCTURE<!DOCTYPE> Defines the HTML version to the browser<html></html> Defines the page as a HTML document<head></head> Contains the metadata (title, style, link, script, etc.)<body></body> Contains the content of the documentII.! SECTION DIVISIONS<header></header> Contains the document’s headings<footer></footer> Contains the document’s footer<nav></nav> Defines a set of navigation links<div></div> Container that defines a section of your document<article></article> Defines an independent, self-contained section in the site.<section></section> A generic section in the document, similar to <div><aside></aside> A section with related content, which could be separate<hr> from the main content. Usually displayed in the sidebar.<br> Defines a horizontal line divider Defines a line break! GLOSSARY 18

III.! TEXT TAGS There are six levels of headings. From <h1> being the largest to <h6> being the smallest. <hl></hl>,<h2></h2>, Defines a paragraph <h3></h3>,<h4></h4>, Italicizes the text <h5></h5>,<h6></h6> <p>/<p> Bolds the text Underlines the text <i></i> Defines an numbered list Defines a bullet list <b></b> Defines a list element <u></u> <ol></ol> <ul></ul> <li></li> IV.! IMAGES & LINKS!!<img></img> Defines an image in a HTML document. <img src=“filename.jpg”></img><a></a> Defines a link.<link></link> <a href=“url”> Click here </a><script></script> Imports an external style sheet.<title></title> <link rel=“stylesheet” href= “style.css”> Imports an external script document <script src=“js/script.js”></script> Defines the name of the webpage GLOSSARY 19!

!! 5!REFERENCES \"HTML Cheat Sheet.\" Simple Guide to HTML. N.p., n.d. Web. 18 Feb. 2016. HTML Tutorial. W3Schools, n.d. Web. 18 Feb. 2016. Kitamura, Eiji. \"Introduction to HTML Imports - WebComponents.org.\" Introduction to HTML Imports. Web Components, 4 Jan. 2015. Web. 18 Feb. 2016. Space Adventure. Digital image. Deviantart. N.p., 14 Aug. 2015. Web. 18 Feb. 2016.! GLOSSARY 20

! 6 INDEX HTML Elements <a> 19 <header> 13, 18 <article> 13, 18 <hr /> 18 ! <aside> 13, 18 <html> 12, 18 ! <b> 8, 9, 19 <i> 19 ! <body> 12, 13, 18 <img> 19 ! <br /> 18 <li> 19 ! ! <div> 13, 18 <link> 19 ! <!doctype> 12, 13, 18 <nav> 13, 18 ! <footer> 13, 18 <ol> 19 ! <h1> 11, 19 <p> 11, 19 ! <h2> 19 <script> 19 ! <h3> 19 <section> 13, 18 !! <h4> 19 <title> 11, 19!! <h5> 19 <u> 19 <h6> 19 <ul> 19 ! <head> 12, 18!!! !!!!!!!! !! ! INDEX 21

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!