My HTML Notebook I

***** On Wednesday, 8/29/18, I started learning the fundamentals of HTML on sololearn.com. *****

***** On Monday, 10/29/18, I completed the HTML Fundamentals course and was issued the certificate. *****

Module 1: Overview

What is HTML?

HTML = Content: HyperText Markup Language (HTML) is the building-blocks of web pages.

Unlike a scripting or programming language that uses scripts to perform functions, a markup language uses tags to identify content.
HTML allows you to place images, text, videos, forms and other pieces of content together into a webpage. Words can be edited, images can be resized, and links can be added to either.

Anything that you can read or view on this website is being presented to you (by way of a browser) with HTML

Modern Web Design

HTML: Structure
CSS: Presentation
JavaScript: Behavior

PHP or similar: Backend
CMS: Content Management

Module 2: HTML Basics

I. Head and Body Tags
The head tag is a container for metadata and is placed between the "html" tag and the "body" tag. While the body tag defines the main content of the HTML document or the section of the HTML document that will be directly visible on any web page.

II. Paragraph and Single Line Break
A paragraph can be created using the "p" tag. A single line break can be added using the "br /" tag.

III. Text Formatting
Bold text can be formatted using the "b" tag. Big text can be formatted using the "big" tag. Italic text can be formatted using the "i" tag. Small text can be formatted using the "small" tag. Strong text can be formatted using the "strong" tag. _Subscripted text can be formatted using the "sub" tag. ^{Superscripted} text can be formatted using the "sup" tag. Inserted text can be formatted using the "ins" tag. Deleted text can be formatted using the "del" tag.

Take note that the "strong" tag is a phrase tag and defines important text; so does the emphasis tag. Also, browsers display "strong" tags as "bold" tags, and "emphasis" tags as "italic" tags.

IV. Headings, Lines, Comments
There 6 levels of headings, which are ranked according to importance. They are the h1, h2, h3, h4, h5, h6 tags.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

A horizontal line can be created using the "<hr />" tag.

Comments can be added using this tag format:

<!-- Insert comment -->

V. Attributes
Attributes are always specified in the start tag, and they appear in <name="value"> pairs.
An element's width can be defined using pixels or percentages.

i.e. The horizontal line can be modified so it has a width of 50 pixels or 50%.

Pixels:

Percentages:

The align attribute is used to specify how the text is aligned.

i.e. This text is centered.

VI. Images
The "img" tag is used to insert an image. It contains only attributes, and does not have a closing tag.

The image's URL can be defined using the "src" attribute.
The HTML image syntax looks like this:

<img src="image.jpg" />

Take note that the "alt" attribute specifies an alternate text that describes the image in words. It is required and useful in the case that the image cannot be displayed.

You need to put in the "image location" for the src attribute that is between the quotation marks.

i.e.

To define the image size, use the width and height attributes. The value can be specified in pixels or as a percentage.

i.e.

Pixels → height = 400px, width = 280px:

Percentage → height = 60%, width = 20%:

Use the border attribute within the image tag to create a border around the image.

i.e. 10-pixel border

VII. Links
Links to text or images, that will enable the user to click on them in order to be directed to another file or webpage, are defined using the "a" tag.

The "href", A.K.A Hypertext REFerence, attribute can be used to define the link's destination address:

Tag format → <a href=""></a>

Take note that an image can be linked to another document by nesting the "img" tag inside "a" tags.

Links can be either absolute or relative.

i.e.

Videos and Music

The target attribute specifies where to open the linked document.
Giving a _blank value to your attribute will have the link open in a new window or new tab.

i.e.

Google

VIII. Lists
An ordered list starts with the "ol" tag, and each list item is defined by the "li" tag.
Take note that the list items will automatically be marked with numbers.

1. Red
2. Blue
3. Green

An unordered list starts with the "ul" tag. Also, the list items will be marked with bullets.

i.e.

• Red
• Blue
• Green

IX. Blog Project: My Skills
Back to my blog! Let's create the My Skills section, which is an unordered list of languages I know.

My Skills

• HTML
• MATLAB
• C

X. Tables
Tables are defined by using the "table" tag.
They are divided into table rows with the "tr" tag.
Table rows are divided into table columns or table data with the "td" tag.

Take note that "td" tags act as data containers within the table.
Thus, they contain all sorts of HTML elements, such as text, images, lists, other tables, etc.

i.e. one row, three columns

A border can be added using the border attribute.

i.e. A table cell can span two or more columns:

Colspan attribute in action:

Notice that in row 2 column 2, "Orange" spans 2 cells.

Take note that using the rowspan attribute allows you to make a cell span more than 1 row.

To change the table's position, use the align attribute inside the table tag:

i.e.

Use the bgcolor attribute to specify a background color.

i.e. Red background color

XI. Blog Project: My Schedule
Take note that the th tags represent the table headers.

My Fall 2018 Schedule

XII. Inline and Block Elements

In HTML, most elements are defined as block-level or inline elements.
Block level elements start from a new line.
i.e.: <h1>, <form>, <li>, <ol>, <ul>, <p>, <pre>, <table>, etc.

Inline elements are normally displayed without line breaks.
i.e.: <b> <a>, <strong>, <img>, <input>, <em>, <span>, etc.

The <div> element is a block-level element that is often used as a container for other HTML elements.
When used together with some CSS styling, the <div> element can be used to style blocks of content.

i.e.

Headline

Similarly, the <span> element is an inline element that is often used as a container for some text.
When used together with CSS, the <span> element can be used to style parts of the text:

i.e

Know That Knowledge Is Key

Summary
The <div> element defines a block-level section in a document.
The <span> element defines an inline section in a document.

The following elements can be used as either block level or inline elements:
APPLET - embedded Java applet
IFRAME - Inline frame
INS - inserted text
MAP - image map
OBJECT - embedded object
SCRIPT - script within an HTML document

You can insert inline elements inside block elements.
i.e. you can have multipile <span> elements inside <div> element.

Take note that inline elements cannot contain any block level elements.

XIII. Forms

HTML forms are used to collect information from the user
Forms are defined using the <form> element, with its opening and closing tags:

i.e.

<body>
  <form... </form>
</body>

Use the action attribute to point to a webpage that will load after the user submits the form.

i.e.

<form action="http://www.google.com">
</form>

Take note that the form is usually submitted to a web page on a web server.

The method attribute specifies the HTTP method (GET or POST) to be used when forms are submitted:

i.e.

<form action="url" method="GET">

<form action="url" method="POST">

To take in user input, you need the corresponding form elements, such as text fields. The <input> element has many variations, depending on the type attribute. It can be a text, password, radio, URL, submit, etc.

i.e. a form requesting a username and password

Take note that the name attribute specifies a name for a form.

If the input type is changed to radio, it allows the user to select only one of a number of choices:

i.e.

Male
Female

The type "checkbox" allows the user to select more than one option:

i.e.

Male
Female

Take note that the <input> tag has no end tag.

The submit button submits a form to its action attribute:

i.e.

After the form is submitted, the data should be processed on the server using a programming language, such as PHP.

XIV. Blog Project: Contact Form

Next, let's create a Contact Form! The form will include Name, Email, and Message fields. A Submit button will also be added.

i.e.

Contact Me

This is just a static HTML page, so it won't work to actually submit the form. You'd need to create the server-side code in order to submit a real form and process the data. PHP code is really helpful for this!

XV. HTML Colors

HTML colors are expressed as hexadecimal values.

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

There are 16 values, 0 through F. Zero represents the lowest value, and F represents the highest.

Colors are displayed in combinations of red, green, and blue light (RGB).

Hex values are written using the hashtag symbol (#), followed by either three or six hex characters.
As shown in the picture below, the circles overlap, forming new colors:

All of the possible red, green, and blue combinations potentially number over 16 million.

Here are a few of them:

A mix of colors can form additional colors:
i.e. Orange and red mix

The bgcolor attribute can be used to change the web page's background color.

i.e. Platinum background, Dark Cyan headline

Dark Cyan Headline

Take note that the color attribute specifies the color of the text inside a <font> element.

XVI. Frames

A page can be divided into frames using a special frame document.

The <frame> tag defines one specific window (frame) within a <frameset>. Each <frame> in a <frameset> can have different attributes, such as border, scrolling, the ability to resize, etc.

The <frameset> element specifies the number of columns or rows in the frameset, as well as what percentage or number of pixels of pixels of space each of them occupies.

i.e.

<frameset cols= "100, 25%, *"> </frameset>
<frameset rows= "100, 25%, *"> </frameset>

The <noresize> attribute is used to specify that a user cannot resize a <frame> element:

i.e.

< frame noresize ="noresize">

Frame content should be defined using the src attribute.

Lastly, the <noframes> element provides a way for browsers that do not support frames to view the page. The element can contain an alternative page, complete with a body tag and any other elements.

i.e.

<frameset cols= "25%, 50%, 25%">
<frame src= "a.htm" />
<frame src= "b.htm" />
<frame src= "c.htm" />
<noframes> Frames not supported!</noframes>
</frameset>

XVII. Blog Project: Putting It All Together

To finalize our blog, we'll use a frame to embed a YouTube video. We'll also create a Follow Me section that includes links at the end of the page.

Go to top
« Previous 1 2 Next »