HTML is the acronym of the term “Hyper Text Markup Language”, which means “hypertext markup language”. HTML does not affect a programming code but is a declarative language for marking hypertexts that allows you to indicate how to arrange the content of the elements within a web page. Despite this specification, it is common to hear: “programming in HTML “.
These indications are given through unique markers called tags to structure the hypertexts. The idea consists in defining languages based on textual titles or tags, which allow describing the structural characteristics of documents. Each tag contains structural information with a particular semantic meaning that somehow denotes the text connected to it. Furthermore, HTML does not differentiate between uppercase and lowercase characters, i.e. it is defined as a “case insensitive” language.
HTML Tags: What They Are And How They Work
Now let’s see an example of how a web page is structured that can be defined completely to program our website in HTML. As in any newspaper page, HTML pages also use a structure that helps readers understand what they are seeing. That is, there will be a title, text and images. If the article is rather voluminous, we will be able to find subtitles that distinguish each topic covered. Therefore, we will always find a hierarchy that helps us acquire a sense of what is shown to us within our HTML website.
In an HTML page, we will only have to add so-called tags, which the browser will use to interpret the content that they will have to display. Each element will therefore have an opening tag and a closing tag (which differs from the “/” character) and will look like this: <tag> content of the title </tag>. We can say that the tags behave like containers, and we will initially have to learn to recognize them to create our first HTML web page.
HTML Web Page: Examples And Descriptions
To begin to understand them, here is a simple example: All HTML pages have the <html> tag at the beginning, which tells the browser that everything after it can be interpreted with HTML (currently, we are at the HTML5 standard). Inside the <html> tag, just below we find the <head> and <body> tags. The <head> tag contains all the data that gives the browser information but is not shown on the screen. For example, above, we have inserted the <meta> tag, where we indicate to the HTML interpreter that we use a standard UTF-8 character encoding on this page.
In this tag, we find a different structure than the others. Here we see how we can associate additional information to a marker, thanks to the couple name (charset) and value (utf-8). Below is <title> which assigns the title to the browser window we view and which, in addition to adding meaning to the entire page of our HTML website. Further down, we find <body>, within which we will insert all the content that we want to make visible in the browser window.
The <h1> and <h2> tags represent the first and second level titles, we can go down to <h6>. The first level title <h1> can be used only once within the web page of our HTML site, as it communicates the identification of all the page content to the browser and would also create conflicts at the indexing level. The others can instead be used at will. Finally, the <p> tag stands for paragraph and contains all the text that gives substance to the speech of an article.
Programming A Web Page In HTML: The Steps To Follow
To create an HTML web page and create a website, simply open Notepad (for Windows users or TextEdit – for MacOS users), write all the tags inside the document and save the file with the “.html” extension; alternatively, you can use the text editor Notepad ++ for Windows or Brackets for MacOs, both open-source, downloadable for free, as well as fully customizable.
HTML Editor
After you have downloaded your favorite editor, you can proceed by opening it and creating the first file of your website HTML: Once the file has been created, copy the code from the previous example onto your HTML page, you should see a screen like this below. On Brackets, to view the language correctly and immediately, select it in the bar at the bottom right: You will have a result like this where you will notice how the colors now define the semantics of the code for a more immediate understanding: Now save, adding the correct extension at the end of the file name, i.e. “.html”.
The file will now be ready and compatible with your browser. Reach the folder where you saved it and double click. A screen like this will appear. At this point, we introduce an image with the <img> tag. This marker does not need the closing tag. It will be sufficient to indicate the path where to retrieve the image using the “src” attribute. After completing this example, you can say that you have built your first HTML page.
What Is CSS? Namely: What Is CSS?
“Cascading style sheets”, or cascading style sheets, are closely related but conceptually different from HTML. This is because they deal with the aesthetic part of the tags defined above. HTML without CSS would be just a bad copy of our web page. Over time it became necessary to introduce CSS to separate the contents of HTML pages from their formatting and allow for more transparent and easier to use programming.
Alternatively, one could think of inserting the style tag in the .html file and defining an interior style declaration relative to the page that contains the word itself. Today this procedure has lost its importance and has been almost entirely replaced by style sheets, which allow obtaining a clean, lean and easier to consult code. An example of CSS code could be:
p {
font-family: ‘Lato’, Verdana, sans-serif;
font-size: 14px;
color: green;
}
On the left, you define the font, size and color of the paragraphs within my HTML page. The browser will interpret this portion of code, and the user will see the section with the font “Side”, a large 14px in green color on the screen. On the right is defined the background color of the divs.
CSS Selectors And Global Attributes
As you can see, both examples are composed of the same elements: a selector (e.g. div in our case) followed by curly brackets containing the properties and their respective values. The selector, as the name suggests, serves precisely “to select” the element or elements of the page to which to apply the declarations contained between the braces (the so-called “declarative block”). Very useful and essential for those who use this type of language are also the global attributes” id” and “class”; the latter applies to all elements, and without them, CSS would not be such a powerful tool. Id and type are one of the keys to making the most of this language.
Programming In HTML: Linking CSS To HTML
Simple! Just insert a link to an external sheet inside the <head> tag of the HTML sheet, which will be nothing more than the CSS style sheet. The string to use is the following: <link rel = “stylesheet” type = “text / CSS” href = “name_sheet_of_stile.css” /> By simply copying and pasting this string and modifying “name_sheet_of_stile.css” with the appropriate name, it will be possible to view the web page just created on the browser.
Also Read: SAP & Microsoft Simplify The Migration To The Cloud: The Project is Born
![Pinterest](https://pinterest.com/pin/create/button/?url=https://www.technopublish.com/programming-a-web-page-in-html-and-css/&media=https://www.technopublish.com/wp-content/uploads/2022/04/HTML-CSS.jpg&description=HTML is the acronym of the term "Hyper Text Markup Language", which means "hypertext markup language". HTML does not){kind=link}