4.16. Introduction to HTML
HTML, which is the acronym for HyperText Markup Language, is the markup language used to develop web pages. This language allows the creation of documents that can be read on practically any type of device connected to the internet. HTML is the foundation for any website or web application.
Basic Structure of HTML
An HTML document has a basic structure that includes opening and closing tags. The opening tag indicates the beginning of an element and the closing tag indicates the end of that element. Furthermore, an HTML document is composed of a head and a body.
The <html> indicates the beginning and end of an HTML document. Within this tag, we have the <head> which contains information about the document, such as the title that appears in the browser's title bar and links to CSS and JavaScript files. The <body> contains the main content of the document, such as text, images, links, tables, lists, etc.
Tags and Attributes
HTML tags are the elements that define the structure of the document. Each tag has its own meaning and tells the browser how the content should be displayed. Some examples of tags are: <h1> for titles, <p> for paragraphs, <a> for links, <img> for images, among others.
Attributes are used to provide additional information about elements. They appear in the opening tag and are followed by an equals sign and a value in quotation marks. For example, in the tag <a href="https://www.example.com">Example</a>, href is an attribute that indicates the link address.
Introduction to CSS
CSS, or Cascading Style Sheets, is a style language used to describe the appearance of a document written in HTML. With CSS, you can control the layout of multiple pages at once, as well as various design aspects such as colors, fonts, and spacing.
Basic CSS Structure
A CSS stylesheet consists of a list of rules. Each rule or rule set consists of a selector and a declaration block. The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property and a value, separated by a colon.
Selectors and Properties
Selectors define which elements the rule applies to. They can select elements by type, class or ID, among others. Properties are aspects of the element that you can style, such as color, font, size, margin, padding, etc. The property value defines how you want to style this aspect.
For example, the CSS rule below applies the color red to the text of all paragraphs (<p>):
<style>
p {
color: red;
}
</style>
In the above rule, 'p' is the selector, 'color' is the property and 'red' is the value.
By combining HTML and CSS, you can create web pages with sophisticated structure and design. However, to add interactivity and functionality to a website, you will need to learn JavaScript, which is the next step on the journey to becoming a front-end developer.
