Coding for Rookies: Notes on HTML
By: Rowena Chang
Tags: Codelikeagirl, Coding, Women In Tech, Notes, HTML

Introduction to HTML

HTML is HyperText Markup Language

Markup language defines the structure and presentation of raw text

Raw text is wrapped in HTML elements

HyperText is text displayed that provides access to other text through links, aka hyperlinks

Technical Vocab

Attribute: extra piece of info to attach to HTML element; made up of name and value

HTML Element: entire code block, including the tags and text inside; formed by HTML tags and the text it contains

HTML Tag: notation that wraps elements

Content: the information between the opening and closing tags

Opening Tag and Closing Tag: used to start and end an HTML element; closing tags have a forward slash inside

Child: when an element is contained inside another element; the child element is nested inside the parent element

Hierarchy: the relationship between elements and their ancestor and descendent elements

Syntax

Text & tags — use opening <p> and closing </p> tags

<h1>Very Important Heading</h1>

<h2>Lorem Ipsum Example</h2>

<p>This text is a paragraph. Wrap the text in paragraph tags. </p>

HTML Hierarchy: child elements can inherit behavior and styling from their parent element

<body>

<div>

<h1>Sibling to p, but also grandchild of body</h1>

<p>Sibling to h1, but also grandchild of body</p>

</div>

</body>

Headings: there are six different heading elements: <h1> , <h2> , <h3> , <h4> , <h5> , <h6>

, , , , , Divs: short for division; useful for grouping elements together

Attributes: added to the opening tag of an element and is made up of name and value — ex: id

<div id="intro">

<h1>Introduction</h1>

</div>

Displaying Text

Use paragraph <p> or span <span> , which contains short pieces of text or HTML

or span , which contains short pieces of text or HTML Use <span> to target a specific piece of content that is inline

to target a specific piece of content that is inline Use <div> to divide your content into blocks

Styling Text

Use <em> tag to italicize, and <strong> tag to bold important text

tag to italicize, and tag to bold important text Line Breaks: use <br> ; doesn’t need an ending tag

; doesn’t need an ending tag Unordered Lists: use <ul> and <li> for each list item; create a bulleted list

<ul>

<li>Limes</li>

<li>Tortillas</li>

<li>Chicken</li>

</ul>

Ordered Lists: use <ol> and <li> for numbered lists

Images and Attributes

Images: use the <imp > tag; does not have a closing tag

<img src=”URL” />

The src (source) attribute tells us what the source of the image is — link or file path for image

(source) attribute tells us what the source of the image is — link or file path for image The alt attribute contains text that identifies the image; back-up text to provide accessibility or display in case image cannot load

<img src="http://indonesiatatler.com/images/i/story-20170113165507-kwk-hero-image-670x447_resized_670x447.jpg" alt="Karlie Kloss kicking off a Kode with Klossy camp">

For videos, use <video> and </video> , <img> , src , width , height , controls attributes

<video src="myVideo.mp4" width="320" height="240" controls> Video not supported </video>

Links

Use <a> to add a link. It has an opening and closing tag and uses attributes

to add a link. It has an opening and closing tag and uses attributes Use href instead of src to link web address