4.18 Introduction to HTML: basic structure, tags and attributes
HTML, which stands for Hyper Text Markup Language, is the standard markup language for creating web pages and applications. Combined with technologies like CSS (Cascading Style Sheets) and JavaScript, HTML forms the essential triad of tools for the web.
Basic structure of HTML
A basic HTML document has a very simple structure. It starts with declaring the document type, which for HTML5 is simply <!DOCTYPE html>. Next comes the <html> element that wraps the entire content of the page. Within this, we have two main elements: <head> and <body>.
The <head> element contains metadata about the document, such as its title (which appears in the title bar or browser tab), links to CSS stylesheets, JavaScript scripts, and various other information that is not presented to the user.
The <body> element is where all the content that the user sees and interacts with resides. This includes text, images, videos, forms, buttons, and all other interactive elements on the page.
HTML Tags and Attributes
HTML tags are the building blocks of any web page. They define and describe the content. Each tag begins with a angle bracket (<) and ends with an angle bracket (>). Most HTML tags have an opening tag and a closing tag, with content in between.
For example, <p>This is a paragraph.</p>. Here, <p> is the opening tag, </p> is the closing tag, and anything in between is the content of the tag. p>
HTML attributes provide additional information about elements. They come in name/value pairs and are always included in the opening tag. For example, in the image tag <img src="imagem.jpg" alt="An image">, src and alt they are attributes.
CSS Properties and Values
CSS, or Cascading Style Sheets, is a style sheet language used to describe the appearance of a document written in HTML. It lets you control things like text color, font size, spacing between paragraphs, how columns are sized and laid out, what types of images or background colors to use, etc.
CSS Properties
CSS properties are the aspects of HTML that you can change or manipulate. For example, you can change the color, margin, padding, height, width, border, font size, font family, line height, text alignment, position, font style, list, the layout table and more.
CSS Values
Values are what you set or use to change CSS properties. For example, if the property is 'color', then possible values could be 'red', 'green', 'rgb(255,0,0)', '#FF0000', etc. Each property has its own set of possible values, some of which are predefined, while others can be defined by the user.
For example, the 'font-size' property controls the size of the text. If you want your text to be displayed at a size of 16 pixels, you would use the property and value like this: font-size: 16px;.
In short, HTML and CSS are fundamental tools for any web developer. HTML provides the structure and content of the page, while CSS allows you to control exactly how that page looks. With a good understanding of these two languages, you can create dynamic and attractive web pages.
