SoloLearn (HTML)
SoloLearn (HTML)
SoloLearn (HTML)
Unlike a scripting or programming language that uses scripts to perform functions, a markup
language uses tags to identify content.
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
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.
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.
Headings, paragraphs, lists, quotes, images, and links are just a few of the elements that can be
contained within the body tag.
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.
Add the basic HTML structure to the text editor with "This is a line of text" in the body section.
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:
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 browser does not display comments, but they help document the HTML and add
descriptions, reminders, and other notes.
Example:
Result:
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
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.
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:
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.
When writing HTML5 documents, one of the first new features that you'll notice is the doc type
declaration:
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.