Introduction
Basics
Elements
Attributes
Headings
Paragraph
Styles
Text Formatting
Quotation
Comments
Text Formatting
Colors
Styling HTML with CSS
Links
Images
Tables
Iframes
Javascript
Filepaths
Head

Introduction

The notes were taken based on the tutorial from https://www.w3schools.com/html/default.asp, and the notes could be used for a quick lookup about the usage of the HTML commands. HTML stands for Hyper Text Markup Language.

Basics

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

<p> : paragraph

<a href="https://www.w3schools.com/">This is a link</a> : link

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142"> : image with source name in src , alternative text in alt

<button>Click me</button> : button

Lists are defined with the <ul> (unordered/bullet list) or the <ol> (ordered/numbered list) tag, followed by <li> tags (list items)

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Elements

Elements consists of start tag and end tag with content in between. For example, <h1> to <h6>, <p>, <br> (empty element, defines line break, ended with <br/>) and so on.

Attributes

Attributes provide additional info for elements, and it’s specified in the start tag. For example, <a href="http://www.w3school.com.cn">This is a link</a> specifies the href attribute.

The following shows some frequently used attributes, a complete attribute list is at https://www.w3schools.com/tags:

alt attribute specifies an alternative text to be used
disabled Specifies that an input element should be disabled
id Specifies a unique id for an element
src Specifies the URL (web address) for an image
style attribute is used to specify the styling of an element, like color, font, size etc. For example,

<p style="color:red">I am a paragraph</p>

The language is declared with the lang attribute.
A title attribute is added to the <p> element. The value of the title attribute will be displayed as a tooltip when you mouse over the paragraph. For example,

<p title="I'm a tooltip">
This is a paragraph.
</p>

Headings

Default heading size can be altered by the style attribute:

<h1 style="font-size:60px;">Heading 1</h1>

<hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.
<head> is a container for metadata (title, scripts, styles, meta information, and more) and will not be displayed. It is placed between the <html> tag and the <body> tag.

Paragraph

Extra spaces or lines in the HTML code won’t affect the output and the brower will remove extra spaces and lines when displayed. <pre> element defines preformatted text, any content in between this tag will be displayed in a fixed-width font and *pre*serves the spaces and line breaks.

Styles

The syntax for style is

<tagname style="property:value;">

where the property is a CSS property and the value is a CSS value.

style attribute is used for styling HTML elements
background-color property is used for background color
color property is used for text colors
font-family property is used for text fonts
font-size property is used for text sizes
text-align property for text alignment

<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
</body>

Text Formatting

Frequently used text formatting elements are:

<b> defines bold text
<em> defines emphasized text
<i> defines italic text
<small> defines smaller text
<strong> defines important text
<sub> defines subscripted text
<sup> defines superscripted text
<ins> defines inserted text
<del> defines deleted text
<mark> Defines marked/highlighted text

Quotation

<abbr> defines an abbreviation or acronym
<address> defines contact information for the author/owner of a document
<bdo> defines the text direction
<blockquote> defines a section that is quoted from another source
<cite> defines the title of a work
<q> defines a short inline quotation

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>

<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

<address>
Written by John Doe.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

<bdo dir="rtl">This text will be written from right to left</bdo>

Comments

Comments are added to the html source by .

Colors

A list of supported colors in HTML is https://www.w3schools.com/colors/colors_names.asp.

Except background-color and color, one can use border to define the color of borders:

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

Styling HTML with CSS

CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media.

Use the HTML style attribute for inline styling

<h1 style="color:blue;">This is a Blue Heading</h1>

Use the HTML <style> element to define internal CSS and use the HTML <head> element to store <style> element

<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Use the HTML <link> element to refer to an external CSS file and use the HTML <head> element to store <style> and <link> elements

<html>
<head>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">

</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

The styles.css may look like,

body {
    background-color: powderblue;
}
h1 {
    color: blue;
}
p {
    color: red;
}

Use the CSS color property for text colors
Use the CSS font-family property for text fonts
Use the CSS font-size property for text sizes
Use the CSS border property for borders
Use the CSS padding property for space inside the border
Use the CSS margin property for space outside the border

p {
    color: red;
    font-family: courier;
    font-size: 160%;
    border: 1px solid powderblue;
    padding: 30px;
}

`id` and `class` attribute

An id attribute to the element can be used to define a specific style for one special element.

<p id="p01">I am different</p>

#p01 {
    color: blue;
}

A class attribute to the element can be used to define a style for special types of elements.

<p class="error">I am different</p>
p.error {
    color: red;
}

Links

A link does not have to be text. It can be an image or any other HTML element. The syntax is,

<a href="url">link text</a>

Link color * Local links: A local link (link to the same web site) is specified with a relative URL (without https://www....). For example,

<a href="html_images.asp">HTML Images</a>

Link colors can be defined in <style> in a CSS file,

<!--
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red -->

<style>
a:link {
    color: green; 
    background-color: transparent; 
    text-decoration: none;
}

a:visited {
    color: pink;
    background-color: transparent;
    text-decoration: none;
}

a:hover {
    color: red;
    background-color: transparent;
    text-decoration: underline;
}

a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
}
</style>

target attribute specifie where to open the linked document. _blank opens the linked document in a new window or tab, _self opens the linked document in the same window/tab as it was clicked (default), _parent opens the linked document in the parent frame, _top opens the linked document in the full body of the window, framename opens the linked document in a named frame. Example usage:

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

Use image as link

Images

`<img>`

<img>
<picture>

Syntax:

<img src="url">
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">

No closing tag is needed for <img>.

Attributes:

<alt> provides an alternate text for an image, if the user for some reason cannot view it. It’s a required attribute.
<width> and <height> atributes can be used directly to specify the width and height of the image in pixels. Or alternatively, use style attribute, for example, style="width:500px;height:600px;". The latter is preferred as it prevents styles sheets from changing the size of images.

Other uses of images:

Use image as a link:

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>

Use floating image with CSS <float> property.

<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

Define an image map with clickable areas with <map> tag.

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>

Use image as background with background-image property in style.

<!-- Specify for the body-->
<body style="background-image:url('clouds.jpg')">

<h2>Background Image</h2>

</body>

<!-- Specify for the paragraph -->
<body>

<p style="background-image:url('clouds.jpg')">
...
</p>

</body>

`<picture>`

<picture> can be used as an alternative to show different pictures in different devices.

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

Show one picture if the browser window (viewport) is a minimum of 650 pixels, and another image if not, but larger than 465 pixels.
Always specify an <img> element as the last child element of the element. In case the browser doesn’t support <picture>, or if none of the tags matched.

Tables

An HTML table is defined with the <table> tag.

<tr>: table row
<th>: table header
<td>: table data/cell, are data containers. They can contain all sorts of HTML elements; text, images, lists, other tables, etc.

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

Frequently used properties:

table, th, td {
    border: 1px solid black;  <!-- Add borders -->
    border-collapse: collapse; <!--collapse borders for each td -->
    padding: 15px; <!-- add padding -->
    text-align: left;  <!--alignment-->
    border-spacing: 5px; <!--border spacing-->
}

Span many columns/rows with `colspan` and `rowspan` atributes

<table style="width:100%">
<caption>Monthly savings</caption>  <!--<caption> is used to add a caption.-->
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

Customized style with `<id>` attribute

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

<!--define t01 style-->
table#t01 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
    background-color: #fff;
}
table#t01 th {
    color: white;
    background-color: black;
}

Iframes

An iframe is used to display a web page within a web page.

Syntax:

<iframe src="URL"></iframe> <!--Defines an inline frame -->

Attributes:

height="200" ,width="300", where 200 and 300 are in pixels. Or equivalently, style="height:200px;width:300px;" in CSS style.
style attribute and CSS border property to remove border.
style="border:2px solid red; to change border size, style, color.

<iframe src="demo_iframe.htm" height="200" width="300"></iframe>

<iframe src="demo_iframe.htm" style="border:none;"></iframe>

<iframe src="demo_iframe.htm" style="border:2px solid red;"></iframe>

Javascript

Use javascript to make HTML pages more dynamic and interactive.

Syntax:

<script>  <!--define a client-side script (JavaScript)-->
...
</script>

The <script> element can contain scripting statements, or point to an external script file through the src attribute.

Common uses:

image manipulation,
form validation,
dynamic changes of content.

JavaScript uses the document.getElementById() to select an HTML element.

For example, to write “Hello JavaScript!” into an HTML element with id="demo",

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

Use Javascript to change html styles and attributes

<!--change styles-->
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";

<!--change attributes-->
document.getElementById("image").src = "picture.gif";

Use <noscript> to provide an alternate content for users that have disabled scripts in their browser or have a browser that doesn’t support client-side scripts

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

<!--alternative text when javascript is not supported-->
<noscript>Sorry, your browser does not support JavaScript!</noscript>

Filepaths

<img src="picture.jpg">: picture.jpg is located in the same folder as the current page.
<img src="images/picture.jpg">: picture.jpg is located in the images folder in the current folder.
<img src="/images/picture.jpg">: picture.jpg is located in the images folder at the root of the current web.
<img src="../picture.jpg">: picture.jpg is located in the folder one level up from the current folder.

Head

<head> element is a container for metadata (for example, title, character set, styles, links, scripts, and other meta information) and is placed between the <html> tag and the <body> tag.

Frequently used tags: <title>, <style>, <meta>, <link>, <script>, and <base>.

<title>: 1. defines a title in the browser tab; 2. provides a title for the page when it is added to favorites; and 3. displays a title for the page in search engine results.
<style>defines style information for a single HTML page.
<link> links external style sheets.
<meta> element is used to specify which character set is used, page description, keywords, author, and other metadata.
<base> element specifies the base URL and base target for all relative URLs in a page.

<html>
<head>
  <title>Page Title</title>
  
    <style>
    body {background-color: powderblue;}
    h1 {color: red;}
    p {color: blue;}
  </style>
  
  <link rel="stylesheet" href="mystyle.css">
  
  
  <meta charset="UTF-8">  <!--Define character set-->
  
  <!--a description of your web page-->
  <meta name="description" content="Free Web tutorials">
  
  
  <!--keywords for search engines-->
  <meta name="keywords" content="HTML,CSS,XML,JavaScript">
  
  <!--the author of a page-->
  <meta name="author" content="John Doe">
  
  <!--Refresh document every 30 seconds-->
  <meta http-equiv="refresh" content="30">

  <!--instructions for browser on how to control the page's dimensions and scaling.-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <base href="https://www.w3schools.com/images/" target="_blank">

</head>
<body>

<p>The content of the body element is displayed in the browser window.</p>
<p>The content of the title element is displayed in the browser tab, in favorites and in search engine results.</p>

</body>
</html>

Layout

<header> - Defines a header for a document or a section
<nav> - Defines a container for navigation links
<section> - Defines a section in a document
<article> - Defines an independent self-contained article
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details
<summary> - Defines a heading for the
element

HTML Basics

Table of contents

Introduction

Basics

Elements

Attributes

Headings

Paragraph

Styles

Text Formatting

Quotation

Comments

Colors

Styling HTML with CSS

`id` and `class` attribute

Links

Images

`<img>`

`<picture>`

Tables

Span many columns/rows with `colspan` and `rowspan` atributes

Customized style with `<id>` attribute

Iframes

Javascript

Filepaths

Head

Layout

HTML Basics

Table of contents

Introduction

Basics

Elements

Attributes

Headings

Paragraph

Styles

Text Formatting

Quotation

Comments

Colors

Styling HTML with CSS

id and class attribute

Links

Images

<img>

<picture>

Tables

Span many columns/rows with colspan and rowspan atributes

Customized style with <id> attribute

Iframes

Javascript

Filepaths

Head

Layout

`id` and `class` attribute

`<img>`

`<picture>`

Span many columns/rows with `colspan` and `rowspan` atributes

Customized style with `<id>` attribute