Published on

Learning HTML

Table of Contents

https://www.w3schools.com/html/

Sample html document

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Hello, world!</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <meta name="description" content="" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <!-- <link rel="icon" href="img/favicon.png"> -->
    </head>


    <body>


        <h1>Hello, world!</h1>


    </body>
</html>

Common tags

<!DOCTYPE html> -> Defines that this is a HTML document

<html> -> Element is the root element of an HTML page

<head> -> Element contains meta information about the HTML page

<title> -> Element specifies a title for the HTML page (shown in title bar)

<body> -> Element defines the document's body, and is a container for all the visible contents. (Headings, paragraphs, hyperlinks)

<h#> -> Heading

<p> -> Paragraph

<a href="https://google.com">Link</a> -> Link

<img src="test.jpg" alt="test image" width="123" height="123"> -> Image

Attributes

alt

<img src="img_girl.jpg" alt="Girl with a jacket">

Alternate text for an image

style

 <p style="color:red;">This is a red paragraph.</p>

Add styles to an element, recommended to use CSS

lang



<!DOCTYPE html>
<html lang="en"> <!-- or en-US -->
<body>
...
</body>
</html>

Declares the language of the web page

title

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

Title attribute is shown when you mouse over

Formatting

<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text

Classes

The class attribute is used to specify a class for an HTML element

Often used to point to a class name in a style sheet, or by JavaScript to access and manipulate elements with the specific class name

HTML elements can belong to multiple classes. Just separate class names with a space

ids

Used to specify a unique id for an HTML element

Cannot have more than one element with the same id in an HTML document

HTML bookmarks can allow you to jump to specific parts of a webpage

<h2 id="C4">Chapter 4</h2>
<a href="#C4">Jump to Chapter 4</a> 
<a href="html_demo.html#C4">Jump to Chapter 4</a>

First create the bookmark with the id element. Second, add a link to the bookmark. You can also link from another page

Layout

https://www.w3schools.com/html/html_layout.asp

Responsive

https://www.w3schools.com/html/html_responsive.asp