Jeromy's Notes

HTML

10 min read

What is HTML

  • HTML stands for HyperText Markup Language
  • A computer language understood by Web browsers to format Webpages
  • We describe the format of the Webpage by marking it up with special symbols we refer to as tags, e.g., the following tags format the text as bold: <b>This text is bold</b>

Grammar

Heading Tags

HTML has six level heading tags, from <h1> to <h6>.

Paragraph Tags

Browsers ignore white spaces such as tabs and newlines. To add space between different paragraphs we can use the paragraph tag <p>. Wrap text with the paragraph tag to add vertical spacing. To practice using the paragraph tag, copy the code on the right at the end of the index.html, but still within the <body> tag.

Note how the browser ignores line breaks and other white space formatting like tabs and content just flows from left to right and then wraps when there’s no more horizontal space. This style of rendering is referred to as inline. Inline content flows from left to right horizontally the whole width of its parent container and then wraps vertically when there’s no more space.

Split Lines

  • <hr/> horizontally split the lines.

List Tags

List tags are used to create lists of related items. There are two types of lists: ordered and unordered.

Ordered List Tags

<ol> declares the beginning of the list <li> declares an item in the list

Unordered List Tags

<ul> declares the beginning of the list <li> declares an item in the list

Table

HTML table tag can be used to format the data with the following tags:

  • table - declares the start of a table
  • tr - declares the start of a row
  • td - declares a table data cell
  • thead - declares a row of headings
  • tbody - declares the main data content rows of the table
  • tfoot - declares a row as a footer
  • th - declares a table cell as a heading

Image

Use the image tag to render pictures in your HTML documents. The images can be anywhere on the internet, or a local image document in your local file system.

alt attribute specifies the content that shows when image can’t be opened, it defines an alternative text description of the image.

<img src="my-picture.jpg"
 
    width="200px"
 
    height="300px"/>
 
<!-- Use img tag to embed pictures in HTML documents.
 
The src attributes references the image file either locally
 
or remotely. The width and height attributes configure the image size. If only width or height is provided, the other scales proportionally    -->

Form

Form tags are useful for entering data. Let’s take a look at the most common ones: form, input, select, textarea, radio, checkbox.

Text Fields

Text fields are the most common form elements allowing entering a single line of text.

<input  type="text"
       placeholder="hint"
       title="tooltip"
       value="COMEDY"/>
<!--	use input tag's text type to declare a single line input field text is default if type is left out. Use placeholder and title to give a hint of what information you're expecting. Optionally initialize the value of the field with value attribute-->
<h4>Text fields</h4>
<form id="text-fields">
   <label for="text-fields-username">Username:</label>
   <input id="text-fields-username" placeholder="jdoe"/><br/>
   <label for="text-fields-password">Password:</label>
   <input type="password" id="text-fields-password"
          value="123@#$asd"/><br/>
   <label for="text-fields-first-name">First name:</label>
   <input type="text" id="text-fields-first-name"
          title="John"/><br/>
   <label for="text-fields-last-name">Last name:</label>
   <input type="text" id="text-fields-last-name"
          placeholder="Doe" value="Wonderland"/>
   <!-- copy rest of form elements here -->
</form>

example above will be rendered as:

Text fields




Date, Email, Number, Range

The input tag’s type attribute has several other possible values: date, email, number, and range. They can be used to enter text information with a specific format. To practice these other formats add the following example under the last input field you worked on earlier, but inside the form tag. The fields should look as shown below on the right.

<h2>Other field types</h2>
<label for="text-fields-email">
   Email:
</label>
<input type="email"
      placeholder="jdoe@somewhere.com"
      id="text-fields-email"/><br/>
<label for="text-fields-salary-start">
   Starting salary:
</label>
<input type="number"
      id="text-fields-salary-start"
      placeholder="1000"
      value="100000"/><br/>
<label for="text-fields-rating">
   Rating:
</label>
<input type="range" id="text-fields-rating"
      placeholder="Doe"
      max="5"
      value="4"/><br/>
<label for="text-fields-dob">
   Date of birth:
</label>
<input type="date"
      id="text-fields-dob"
      value="2000-01-21"/><br/>

The example above will be rendered as:

Other field types





Text Boxes

The textarea tag is useful for entering long form text such as someone’s biography data, or a blog post.

<textarea cols="20"
         rows="25"
         placeholder="Biography"
         title="tooltip">Some text
</textarea>
<!--	use textarea tag for long form text configure its width and height with attributes cols and rows. Use placeholder and tooltip to give hints. Note default value is in tag's body -->
<h2>Text boxes</h2>
<form id="textarea">
   <label>Biography:</label><br/>
   <textarea cols="30" rows="10">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
</form>

the above example will be rendered as

Text boxes


Buttons

<button type="button">Click me!</button>

**

<select>
   <option value="VAL1">Value 1</option>
   <option value="VAL2" selected>
       Value 2</option>
   <option value="VAL3">Value 3</option>
</select>
<!--	Wrap several option tags in a select tag. Optionally provide option's value, otherwise the option's text is the value of the select element. Optionally use selected attribute to select default.	-->
 
<select multiple>
   <option value="VAL1" selected>Value 1</option>
   <option value="VAL2">Value 2</option>
   <option value="VAL3" selected>Value 3</option>
</select>
<!--	Alternatively use attribute multiple to allow selecting more than one option.	Use ctrl+click to select more than one option -->
<h2>Dropdowns</h2>
 
<h3>Select one</h3>
<label for="select-one-genre">
   Favorite movie genre:
</label><br/>
<select id="select-one-genre">
   <option value="COMEDY">Comedy</option>
   <option value="DRAMA">Drama</option>
   <option selected value="SCIFI">
       Science Fiction</option>
   <option value="FANTASY">Fantasy</option>
</select>
 
<h3>Select many</h3>
<label for="select-many-genre">
   Favorite movie genres:
</label><br/>
<select id="select-many-genre" multiple>
   <option selected value="COMEDY">Comedy</option>
   <option value="DRAMA">Drama</option>
   <option selected value="SCIFI">
       Science Fiction</option>
   <option value="FANTASY">Fantasy</option>
</select>

The example above will be rendered as:

Select one

Select many

File Upload Buttons

<h2>File upload</h2>
<input type="file"/>

Radio Buttons

<input type="radio"
name="NAME1"
value="OPTION1"/>
<input type="radio" checked
name="NAME1"
value="OPTION2"/>
<!--	use the input tag's checkbox type to declare a checkbox give the checkbox a value	-->
<h2>Radio buttons</h2>
 
<label>Favorite movie genre:</label><br/>
 
<input type="radio" value="COMEDY"
      name="radio-genre" id="radio-comedy"/>
<label for="radio-comedy">Comedy</label><br/>
<input type="radio" value="DRAMA"
      name="radio-genre" id="radio-drama"/>
<label for="radio-drama">Drama</label><br/>
<input type="radio" value="SCIFI"
      name="radio-genre" id="radio-scifi" checked/>
<label for="radio-scifi">Science Fiction</label><br/>
<input type="radio" value="FANTASY"
      name="radio-genre" id="radio-fantasy"/>
<label for="radio-fantasy">Fantasy</label>

The example above will be rendered as:




CheckBoxes

<input type="checkbox"
       name="NAME2"
       checked
       value="OPTION1"/>
<input type="checkbox"
       name="NAME2"
       value="OPTION2"/>
<input type="checkbox"
       checked
       name="NAME2"
       value="OPTION3"/>
<!--	use the input tag's checkbox type to declare a checkbox give the checkbox a value	-->
<h2>Checkboxes</h2>
<label>Favorite movie genre:</label>
<br/>
<input type="checkbox" value="COMEDY"
      name="check-genre" id="chkbox-comedy" checked/>
<label for="chkbox-comedy">Comedy</label>    <br/>
<input type="checkbox" value="DRAMA"
      name="check-genre" id="chkbox-drama"/>
<label for="chkbox-drama">Drama</label>    <br/>
<input type="checkbox" value="SCIFI"
      name="check-genre" id="chkbox-scifi" checked/>
<label for="chkbox-scifi">Science Fiction</label> <br/>
<input type="checkbox" value="FANTASY"
      name="check-genre" id="chkbox-fantasy"/>
<label for="chkbox-fantasy">Fantasy</label>

The example above will be rendered as:



The anchor tag allows navigating to other websites or other pages within the same website.

<a href="aa.com">
American Airlines</a>
<!--	Use the href attribute to refer to the location of the website or other page in the same website. Click on the body text to navigate -->
Please
<a href="https://www.lipsum.com">click here</a>
to get dummy text<br/>
 
Checkout my <a href="other-page.html">other page</a>

The example above will be rendered as

Please click here to get dummy text

Checkout my other page

Iframes

Embedding other websites

Embedding another Web site into your own is very easy using the iframe tag. Just configure the size of the rectangle you want to dedicate to the other Web site and the URL where the other Web site lives. Here’s the syntax of the iframe tag.

<iframe width="600" height="400"
  src="https://en.wikipedia.org/wiki/SpaceX">
</iframe>
<!--	width and height attributes configure the size of the rectangle we want to dedicate to the other Web site. the src attribute points to the location of the other Web site -->
<h2>Embedding other websites</h2>
<iframe width="600"
        height="400"
        src="https://en.wikipedia.org/wiki/SpaceX">
</iframe>

The example above will be rendered as

Embedding a YouTube video

Other applications such as YouTube and Google slides take advantage of iframes to allow content creators to share their content.

<iframe width="560"
       height="315"
       src="https://www.youtube.com/embed/7CZTLogln34"
       title="YouTube video player"
       frameborder="0"
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
       allowfullscreen>
</iframe>

The example above will be rendered as:

Embedding Google Slides

<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vQoIYM2gXzRLKt4q5D2-ZahG7zvVcAipkRvj5k9GVLiGDs8NPlLpO3Q08cPUKQbqhL6g8aZp1ZJSwrw/embed?start=false&loop=false&delayms=3000"
       frameborder="0"
       width="680"
       height="418"
       allowfullscreen="true"
       mozallowfullscreen="true"
       webkitallowfullscreen="true">
</iframe>

The example above will be rendered as:

Scalable Vector Graphics (SVG)

The svg tag allows declaring a rectangle where we can draw shapes on the screen. The svg tag can contain shape tags such as rect, circle and polygon to draw anything we want. Here’s an example syntax of the svg, rect, and circle tags.

<svg width="300"
     height="100">
  <rect  width="300"
         height="100"          style="fill:rgb(0,0,255);
stroke:rgb(0,0,0);
stroke-width:10;
" />
  <circle cx="50" cy="50"
          r="40"
          stroke="green"
          stroke-width="4"
          fill="yellow" />
</svg>
<!--	svg declares a rectangular area where we can draw	width and height attributes configure the size of the area. rect tag declares a rectangular area to draw a rectangle. width and height attributes declare size of rectangle. style attribute declares border and fill colors and border width
 
 
circle tag declares a rectangular area to draw a circle. cx and cy attributes declares the center position. r attribute declares the radius of the circle. stroke declares the color to draw with. stroke-width declares the size of the border. fill declares color to fill the circle -->

The example above will be rendered as:

SVG - Drawing Rectangles

<svg width="300" height="100">
   <rect width="300" height="100"
         style="fill:rgb(0,0,255); stroke-width:10;
   stroke:rgb(0,0,0)" />
</svg>

→

SVG - Drawing Circles

<svg width="100" height="100">
   <circle cx="50" cy="50" r="40"
           stroke="green" stroke-width="4" fill="yellow" />
</svg>

→

SVG - Drawing Polygons

<svg width="300" height="200">
   <polygon points="100,10 40,198 190,78 10,78 160,198"
            style="fill:lime; stroke:purple; stroke-width:5; fill-rule:evenodd;" />
</svg>

→

Anchors

We used anchor tags earlier to link one Web page to another. The href attribute in anchor tags allow referring other documents which we navigate to when we click on the anchor. We can also reference sections in the same document so we can navigate to different places in the document. To do this we use the name attribute to declare places in the document we want to navigate to. Here’s the syntax for implementing this:

 
<a name="table-of-content"></a>
<a href="#section-a">Go to section A</a>
<a href="#section-b">Go to section B</a>
 
<a name="section-a"></a>
<h1>Section A</h1></a>
<a href="#table-of-content">Up</a>
 
<a name="section-b"></a>
<h1>Section B</h1></a>
<a href="#table-of-content">Up</a>
<!--	declaring a location on the page called 
	table-of-content
	link to go to section-a
	link to go to section-b
 
	declaring location on page called section-a
	actual content
	link to go to table-of-content
 
	declaring location on page called section-b
	actual content
	link to go to table-of-content -->

Anchor - Table of content anchors

<a name="embedding-website"></a>
<h2>Embedding other websites</h2>
<a href="#top">Top</a><br/>
 
<a name="embedding-youtube"></a>
<h2>Embedding YouTube</h2>
<a href="#top">Top</a><br/>
 
<a name="embedding-slides"></a>
<h2>Embedding Google slides</h2>
<a href="#top">Top</a><br/>

→

Embedding other websites

Top

Embedding YouTube

Top

Embedding Google slides

Top

This creates hyperlinks to anchors embedding-website, embedding-youtube and embedding-slides. Now add the code highlighted red below each of the sections Embedding other websites, Embedding YouTube, and Embedding Google slides. Save the content and refresh the index.html Web page. Confirm that clicking the links in the table of content navigates down to the sections below. Save and refresh the page and confirm that the Top hyperlinks navigate back to the top of the screen. Add a similar table of content to the SVG examples.

Graph View