SOLO LEARN (HTML)
HTML stands for HyperText Markup Language.
Unlike a scripting or programming language that uses scripts to perform functions, a markup
language uses tags to identify content.
The Web Structure
The ability to code using HTML is essential for any web professional. Acquiring this skill should be the
starting point for anyone who is learning how to create content for the web.
Modern Web Design
HTML: Structure
CSS: Presentation
JavaScript: Behavior
PHP or similar: Backend
CMS: Content Management
The <html> Tag
Although various versions have been released over the years, HTML basics remain the same.
The structure of an HTML document has been compared with that of a sandwich. As a sandwich
has two slices of bread, the HTML document has opening and closing HTML tags.
These tags, like the bread in a sandwich, surround everything else:
The <head> Tag
Immediately following the opening HTML tag, you'll find the head of the document, which is
identified by opening and closing head tags.
The head of an HTML file contains all of the non-visual elements that help make the page work.
The <body> Tag
The body tag follows the head tag.
All visual-structural elements are contained within the body tag.
Headings, paragraphs, lists, quotes, images, and links are just a few of the elements that can be
contained within the body tag.
Basic HTML Structure:
The HTML File
HTML files are text files, so you can use any text editor to create your first webpage.
There are some very nice HTML editors available; you can choose the one that works for you.
For now, let's write our examples in Notepad.
The HTML File
Add the basic HTML structure to the text editor with "This is a line of text" in the body section.
In our example, the file is saved as first.html
When the file is opened, the following result is displayed in the web browser:
The <title> Tag
To place a title on the tab describing the web page, add a <title> element to your head section:
This will produce the following result:
Creating a Blog
Throughout this course, we'll help you practice and create your own unique blog project, so
you'll retain what you've learned and be able to put it to use. Just keep going and follow the
instructions in the TASK section. This is what your finished blog page will look like.
HTML Headings
HTML includes six levels of headings, which are ranked according to importance.
These are <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.
The following code defines all of the headings:
Horizontal Lines
To create a horizontal line, use the <hr> or </hr> or <hr/> tag.
<hr> tag attributes:
width="x" color="y" align="right/left/center"
<hr hidden> for a hidden horizontal line
This will create a page like below:
Comments
The browser does not display comments, but they help document the HTML and add
descriptions, reminders, and other notes.
Example:
Result:
As you can see, the comment is not displayed in the browser.
The <p> Element
To create a paragraph, simply type in the <p> element with its opening and closing tags:
The result:
Single Line Break
Use the <br /> tag to add a single line of text without starting a new paragraph:
Formatting Elements
In HTML, there is a list of elements that specify text style.
Formatting elements were designed to display special types of text:
HTML Elements
HTML documents are made up of HTML elements.
An HTML element is written using a start tag and an end tag, and with the content in between.
HTML documents consist of nested HTML elements. In the example below, the body element
includes the <p> tags, the <br /> tag and the content, "This is a paragraph".
Some elements are quite small. Since you can't put contents within a break tag, and you don't
have an opening and closing break tag, it’s a separate, single element.
So HTML is really scripting with elements within elements.
The <frame> Tag
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 space each of them occupies.
Working with Frames
Use the <noresize> attribute to specify that a user cannot resize a <frame> element:
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.
Blog Project
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.
Check out the final code:
HTML5
When writing HTML5 documents, one of the first new features that you'll notice is the doc type
declaration:
The character encoding (charset) declaration is also simplified:
New Elements in HTML5
<article>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <footer>, <header>, <nav>,
<output>, <progress>, <section>, <video>, and even more!
New in HTML5
Forms
- The Web Forms 2.0 specification allows for creation of more powerful forms and more compelling user
experiences.
- Date pickers, color pickers, and numeric stepper controls have been added.
- Input field types now include email, search, and URL.
- PUT and DELETE form methods are now supported.
Integrated API (Application Programming Interfaces)
- Drag and Drop
- Audio and Video
- Offline Web Applications
- History
- Local Storage
- Geolocation
- Web Messaging
