HTML is a powerful and popular tool for creating websites and web apps. It's the foundation of the internet, as it understandably holds a lot of info on web products. This article will explore the website's basic concepts and structure of HTML.
What is HTML?
HTML stands for HyperText Markup Language. It's a form of web language specifically used to create and structure websites. It uses a system of elements and codes that define the website's content, layout, and design. With HTML, you can personalize a website by adding media content and basic visuals.
How does HTML work?
At its most basic level, HTML sets up a series of tags around pieces of content. These tags allow web browsers to interpret content coherently. The tags are the ones that tell the browser how to display content on the page. The overall distribution is headings, paragraphs, images, tables, and more.
HTML Basic Concepts?
HTML Tags
A tag in HTML is a code used to define a particular element in a web page. Tags appear between less-than (<) and greater-than (>) symbols. Yet, they may also hold self-closing tags (e.g., <img/>). Tags have the element's name and any customization attribute. These can also nest with each other, building complex structures relatively easily.
| <content> This a content tag </content> |
HTML Declarations
The declaration is a statement that defines the markup. HTML documents start with it to tell the browser the document's version. It allows for backward compatibility and ensures the proper interpretation of the page. HTML uses !DOCTYPE followed by HTML to indicate that you're using HTML 5, the current version.
<!DOCTYPE html>
<html>
</html> |
HTML Elements
An element is an integral part of an HTML document that provides structure and content to a webpage. They form the basic structure and organize the content logically. Some elements include <title> </title> which states the title, <head> </head>, holding information, and <p> </p>, used for inserting paragraphs. Yet, some elements don't need a second closing tag, like <hr/>, which indicates a horizontal line, and <br/>, which leaves space after a paragraph.
HTML Attributes
An attribute is a modifier that provides extra information about an element. You have to put it before an equal sign and then the attribute's value to add it. For example, an <p> element can have the style attribute with a value of "text-align=center." So, the alignment of the text changes within the paragraph. They're usually inside the opening tag, with a space between them and the rest of the content.
ID = specifies an id
width = specifies the width
height = sets the height
form = names the form to which the element belongs
draggable = determines if an element is draggable or not
name = specifies the attribute’s name
|
HTML href
An href is an attribute value that defines a hyperlink that will redirect the user to another web page. It stands for Hypertext Reference and uses the <a> element (anchor) to create links on a webpage. To create an href link in HTML, you should use the syntax <a href= "https://www.example.com/"> Site</a>.
It'll generate a hyperlink that users can click to open a target URL in a browser. Additionally, you can use HTML hrefs to link to other elements within your webpage. To do this, add an id attribute to the element you connect to and then use href. When clicked, you'll generate a link that takes the user directly to the element. For example, with <a href= "#section1"> Go to Section 1</a>.
hrefs are essential to websites. You can create interesting in-app interactions with them. They also allow you to create links that generate a new window when clicked. To do this, use the target attribute with the _blank value. So, it will open the link in a new tab or window, depending on user settings. An example can be <a href= "https://www.wearecapicua.com" target="_blank"> Capicua </a>. Also, hrefs can also hold links to downloadable files such as PDFs or images. To do so, use the download attribute with a value that is the document's file name, like <a href= "URL" download="filename.pdf"> Download PDF</a> As you can see, there are many in which href attributes can enhance the experience within your site! Next time, try to target more interactivity by using them.
HTML Image
An image is an element that adds visuals, like photos, diagrams, GIFs, and illustrations, to a page. The code for adding an image to a webpage is simple. It consists of the following structure <img src= "image"/>. You can also add attributes like alt and title to give info about the picture, like width and height. The more simpler example is <img src="logo.jpg" alt="logo" title="Logo" width=“100” height=“100”>
HTML Video
Audio and video files use <audio control> and <video control> tag elements. When you use them, you can create engaging websites for your visitors. Remember that not all browsers support audio and video. You should always include alternative content sources if the browser doesn't support them.
When working with audio and video, you can also add attributes like autoplay to specify that the audio will start playing as soon as loaded, controls to guarantee that audio controls are visible, and loop to tells the media file to start over again.
HTML Lists
A list arranges items within a website; you can find ordered and unordered lists. Ordered lists create outlines, instructions, and step-by-step procedures. On the other hand, unordered lists are for different items. The tag to create unordered lists is <ul>, while <ol> works for ordered ones. Remember to write each item between <li> tags!
Ordered Lists
<ol>
<li>...</li>
<li>...</li>
<li>...</li>
</ol>
Unordered Lists
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
|
HTML Tables
A table is another way of displaying data through rows and columns. With tables, you can set up data pleasingly and functionally, using the tag <table>; to gives form to the table, <tr> to specify the number of rows, and <td> to specify the columns.
<table>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</table>
|
HTML Website Anatomy
At this point, you probably think that building a website is no easy task. And guess what, you're right! It would be best if you considered several things. One of the critical things is ensuring structure and scalability. In the following section, you'll get an insight into website design. However, remember that we are just drawing a standard prototype. Websites come in all shapes and sizes.
1. URL. The URL is an address that identifies a website or resource on the internet. It comprises the protocol, the hostname/domain, and the path. Although the URL is not intimately related to the HTML code, it's vital to the website's structure. It's the path that indicates what specific resources the user is requesting. URLs play an essential role in navigating and finding information on the web. That's making them a necessary part of digital literacy.
2. Header. It contains the title and the meta description showing in the search results. The header often features stylistic elements such as fonts, colors, and images.
3. Description. A meta description is a concise and informative description of a website's content. It offers an overview of what readers can expect when they click through to the site. It includes the topic's details, facts, and keywords. To build up the meta description, use the <meta> tag and locate it at the top of the document inside <head>.
4. Body. The body contains all the other elements that make up the website. It typically holds text, images, videos, audio, and other multimedia features. A handy tip is that you can use hyperlinks to link areas of the website to increase navigability.
5. Navigation. The navigation bar is a header that gives users easy access to other website sections. It consists of links, usually tabs or buttons, that direct visitors to different pages. These links present content in an organized and accessible manner. Additionally, navigation bars often feature drop-down menus that list multiple options. It makes it easier for users to explore without leaving the page they're currently on.
6. Headings. A heading creates titles and subtitles for documents and sections. Headings can be <h1>,<h2>,<h3>,<h4>,<h5> or <h6> tags, with h1 being the highest level, and h6 being the lowest. When using headings, it's essential to have a logical structure. It must begin with a <h1> tag, followed by <h2>, <h3>, and so on.
7. Paragraphs. Paragraphs use <p> to open and </p> to close. These also hold customizable text with CSS or other elements.
8. Footer. Footers typically go at the bottom of a website. It contains copyright notices, contact information, and other data. In most cases, it's styled distinctly from the rest of the page.
How Does HTML Look in a Coding Editor?
So this is what a simple HTML5 doc looks like in a coding editor. As you can see, almost all the elements listed above are present.
<!DOCTYPE>
<html>
<head>
<title>HTML: Building a Website<title/>
<meta description="HTML is a powerful tool for Web development. This article will explain how it works and how to build a website.">
<head/>
<body>
<nav>
<ul>
<li> <a href="homepage.html"> Home </li>
<li> <a href="about.html"> About </li>
<li> <a href="contact.html"> Contact </li>
</ul>
</nav>
<H1>What is HTML?</H1>
<p>HTML stands for HyperText Markup
Language. It is a form of language
to create and structure webpages</p>
<H2>What does HTML Work?</H2>
<p>HTML sets up a series of tags around pieces of text or other types of content. These tags allow a web browser to interpret and display the content in stylish, easily navigable page layouts.</p>
<footer>Copyright - All rights Reserved</footer>
</body>
</html>
|
Integrate CSS in HTML
CSS (Cascading Style Sheets) is integral to modern web development and design. Nearly all websites now use some form of CSS styling. It controls the website's aesthetics, including layout, colors, fonts, and sizes. With CSS, you can create transitions between different states while maintaining visibility. For example, with this code, you'll establish that the heading color will be gray and the text will be red.
<style>
.heading {
color; gray
}
.p {
color; red
}
</style>
|
There are two ways of integrating CSS into HTML. The first option is to set it up using the <style> tag within the HTML file. CSS is not the same as HTML, so its use will be slightly different by adding curly brackets ({}) and semicolons (;). The second option is linking a CSS file to the head of an HTML file, so you'll have to separate files. It has become a great option because of separating the content from the design. You can make changes quickly and easily without affecting the page's content. So it makes it easier to maintain and update the website over time.
Integrate JavaScript in HTML
JavaScript is a scripting language that enables developers to create interactive web apps. You can use it to create dynamic, responsive, and feature-rich websites. It's often combined with HTML and CSS to create visually appealing and interactive UX.
JavaScript allows you to create great UX by providing tools for manipulating the DOM. To embed JavaScript functions, add the <script> tag to a document's head or body section. This code can contain variables and functions that interact with other HTML elements. In short, it's a tool for web dev that enables you to create interactive user experiences.
Final Thoughts
HTML, CSS, and JavaScript are all critical components of web development. These languages allow you to create appealing websites with a well-structured codebase. With this article, we're merely scratching the surface of web development.
.webp)
