Basics: HTML, CSS, and JS
HTML, or HyperText Markup Language, is a specialized language in technical terms. This is basically how the structure of a web page, which contains information and documents, is determined.
It details which part of the text is classified as the primary heading of the page, what is listed as a set of items, the aspect of the page that is a picture, the element that is a link to a different page, and so forth. The content of the page is provided by the text, adding worth and meaning to the page, whereas the HTML gives order, definition, and a higher understanding of the context. You’ll see what I mean right away.
Let’s also consider Cascading Style Sheets, or CSS for short. This declarative language is utilized to style HTML, meaning it details how an element appears, such as its design, visual presentation, and even how it interacts, like when you hover over a link.
Without CSS, the appearance of HTML documents would all be uniform; usually plain black text in Times New Roman font on a white background, with set sizes for section titles and subtitles.
Essentially, the idea isn’t terrible; however, when discussing conditions on the web, we don’t just have scholarly works, like dissertations and theses, which could benefit from standardization, but there is also the potential to fashion entire experiences with the use of just CSS.
The relationship between HTML, CSS and JS
In practice, you can exist in a residence without utilizing electrical power, water and gas, but to stay warm throughout wintertime you will have to burn wood, to cool down in summer you will need to make wind flow, to prepare food you have to start a fire in the yard, to shower you will have to locate an available body of water or lug water from a well to the restroom, and so on. It is entirely possible to do things as our ancestors did, but if we can find a more efficient or beneficial way to do so, why not take advantage of that?
Oh, and I almost forgot to mention: the browser is like a construction firm that will build your turnkey house and provide it to you, all you have to do afterwards is use it.
I compared a building to a web page in a wider perspective. Using the metaphor of a neighborhood, a website can be seen as a collection of various elements, including different page types and features, all serving distinct purposes.
The human body
Visualize a bustling city populated with millions of inhabitants. This city could be likened to a web page and the HTML is like the architecture that forms its structure. The construction and placement of each neighborhood creates what it is; be it a high-end residential area, large-scale residential area, business district, farmland, industrial area, and so on for spots for tourism and leisure, like parks, gardens and museums.
Last but not least, if you imagine a pizza. All right, don’t just visualize it, take a glance at it right this moment…
Exploring HTML Elements
When enrolled in an HTML course, you will observe that every HTML line has three essential components: the opening tags, the content, and the closing tags.
The initial label consists of the item’s name surrounded by angled brackets at the start and end. This lets you know where the element begins. The termination tag has a slash followed by the same name of the element before it, but apart from that it is the same as the start tag. The final tag is the indicator that the element has ended for you and other coders writing the code. If it is overlooked, the outcome can look strange.
Take the following example:
In this case, the entire element consists of the opening tag
, the content “This is a paragraph” and the closing tag
HTML elements may also include attributes. An attribute gives supplementary details that will not be found in the real material. One example would be:
In this illustration, the label “class” is set to “editor-note.” The “class” label allows for a distinguishing mark to be used for pinpointing the component with notes such as design information.
In an HTML class, it is essential that students learn the necessary criteria for characteristics. For example, there should be a gap between the characteristic and the element’s label or a space between one trait and the preceding attribute. The attribute must be organized to have the name appearing before an equal sign. “Quotation marks need to be included when adding value.”
Nesting Elements With HTML
You can also nest one HTML element inside another, which is known as nesting. If for some reason you want to emphasize a word in the above example, you could write:
When nesting elements, pay attention to proper ordering. This means that you need to finish the inner elements before completing the outer ones. You must make sure that the tag is ended prior to the
tag because it was initiated after. Elements of HTML cannot intersect one another, since browsers would be baffled about how to handle the code, resulting in a less than satisfactory impact for both the developer and the user.
Empty HTML Elements
Elements in HTML which have no content are referred to as empty elements. One example would be an image element, like:
You should take note of two distinct characteristics in this illustration (src and alt) without any internal content. The absence of substantial material is caused by the fact that picture elements do not encompass the content; instead, they merely place an image at the wanted location.
Looking at an HTML Document
In order to make use of all of the various HTML components and grasp the concept of how they interconnect, look at an HTML paper including the elements and processes mentioned above.
Take a look at this example to get a visual understanding of how HTML documents are set up:
We will work our way through this example item by item in order to clarify everything.
The at the start serves as a link to the regulations associated with HTML webpages. This is a necessary element that has been around since the beginning of HTML, and it still needs to be included.
The element is called the root element. It wraps the content within the full page. The is the head element. This is the data that you keep which is not visible to the visitors of your website, but still exists on the HTML page. Illustrations include CSS for design, character set specifications, page explanations and keywords.
assigns the character encoding for the HTML document as UTF-8. That package contains characters from almost all written languages. This element guarantees that HTML will recognise the text you enter correctly. Including this element will help you avoid later issues.
The title element (
Using HTML Elements to Mark Up Text
It is critical that you build a better understanding of the ubiquitous HTML elements since we have already looked into some of them during your studies of web dev. This will facilitate your journey in your HTML course. We cover the most important HTML elements below.
The title tags enable you to show main headings and subheadings in your written material. The HTML language has a total of six header levels, beginning from
. So, you would use:
For the main title on your page. Then the main titles should be in
, and the subsections should be in
. You can keep adding headings, up to the
level. It is not common to use more than 3-4 of these heading levels. It is essential to keep in mind that it is possible to utilize each level of headings as many times as necessary in one document. So, if your web page has chapters, you could have:
And so on.
You observed the usage of the paragraph element in the initial illustration above. It appears as the
Your HTML bootcamp will cover several types of lists. These can be ordered or unordered. No matter what, you will have to have a minimum of two components in your HTML in order to create a list.
- allows for creating a list where it does not matter the placement of the items. An example would be a shopping list. An ordered list can be thought of like a recipe where the sequence of steps is essential. They use the
- element. All of the entries in the list are enclosed in the
So, if you wanted to include a list with instructions, it would look like:
You can put HTML buttons onto your website using the button tag.
tag can be used to centrally align content that is within a table cell or on the whole page.
There is also a line break tag within HTML. This is an empty element, as you just use
with neither an opening nor a closing tag. When you use the line break element, the subsequent text will start on a new line. Ensure there is a gap between the “br” and the forward slash. Older web browsers may not be able to show the line separation correctly. It is important to make sure to have the slash, because XHTML will not accept it without it.
HTML provides the capability to add horizontal lines as a means to separate sections of a document. A
tag is utilized to generate a line from the current point to the edge of the right margin, at which point the line stops. This is also an empty element.
You can employ the
tags to keep the original format of an HTML document.
Leave a Reply