The CSS and HTML Secrets of DataFlex WebApps
Lesson 1 - HTML
A summary of the video course
In this first lesson, we'll dive into the world of HTML. HTML stands for Hypertext Markup Language. Essentially, it's an XML-based format used to describe documents. HTML works with building block elements that can be nested, have content, and utilize attributes to configure them.
A Simple HTML Page
Let's examine a basic HTML page structure.
- This is an example of a simple HTML page with without a lot of content, but what we see is we have a header which contains the title.
- And the browser actually shows this title in the in the title bar.
- In the body, we see an h1 element. h1 stands for heading one, which is the biggest header by default.
- And we see that without any styling, the browser already shows this bigger.
- Then we have a paragraph a paragraph is basically a paragraph of text with some whitespace around it.
- And inside this paragraph, we have an anchor, some text with an anchor, and this anchor will display as a clickable link within the browser.
- So we have the structure of HTML head, body. And above there, we have the doctype, which basically describes tells the browser what standard this document is applying to.
- And in this case, it's the HTML five header.
HTML Elements Overview
Here's a glimpse of some commonly used HTML elements:
- <p>: Represents paragraphs of text.
- <h1>, <h2>: Headings of varying sizes.
- <span> and <div>: Generic elements for layout and styling.
- <table>: Defines a table structure with rows and cells.
- <button>: Renders as a button.
- <input>: For various input elements like checkboxes and radio buttons.
Visualizing HTML Elements
We have a live example of HTML elements. Now, let's inspect them using developer tools, a crucial resource in web development. You can open these tools in most browsers by pressing F12 or using the menu.
Exploring the Document Object Model (DOM)
Within the developer tools, look for the "Elements" section. It displays the DOM, representing the structure of the page. When you hover over an element, it highlights on the left, showing its position within the DOM.
For example, when hovering over a paragraph, you'll see it highlighted on the left. The same goes for other elements like <ul> (unordered list), <li> (list item), and tables (<table>, <th>, <tr>, <td>).
Styling Awaits
The page lacks styling, which we'll address in the next lesson. We'll explore how to apply style and aesthetics to your HTML documents to make them visually appealing.
Stay tuned for more on HTML and web styling in our upcoming lessons!