Weekly Code Quickies podcast

HTML Crash Course for complete beginners

0:00
38:23
15 Sekunden vorwärts
15 Sekunden vorwärts

HTML Crash Course

Introduction

HTML (HyperText Markup Language) is the standard language for creating web pages. It describes the structure of a web page using markup. HTML elements are the building blocks of HTML pages.

Step 1: Basic Structure of an HTML Document

* Open your text editor (e.g., Visual Studio Code).

* Create a new file and save it as index.html.

* Add the following basic structure to your HTML document:

HTML Crash Course

Welcome to HTML Crash Course

: This declaration defines the document type and version of HTML. It ensures the browser knows to render the page in standards mode.

: This is the root element of an HTML document. The lang="en" attribute specifies the language of the document as English.

: This element contains meta-information about the HTML document, such as its title and character set.

: This meta tag specifies the character encoding for the HTML document, ensuring that it can display a wide range of characters correctly.

: This meta tag ensures the webpage is responsive by setting the viewport to match the device's width and initial zoom level.

HTML Crash Course: This element sets the title of the HTML document, which is displayed in the browser's title bar or tab.

: This element contains the content of the HTML document that is visible to the user.

Welcome to HTML Crash Course

: This is a heading element that displays a level 1 heading with the text "Welcome to HTML Crash Course".

Each of these elements plays a crucial role in structuring and presenting the HTML document correctly.

Step 2: Adding Content to the HTML Document

Now that you have set up the basic structure of the HTML document, you can start adding content to it. Here are some common HTML elements for adding text, images, links, and lists:

* Text: Use the

element to add paragraphs of text.

This is a paragraph of text.

* Images: Use the element to add images to your document.

* Links: Use the element to create hyperlinks.Visit Example Website

* Lists: Use the

    (unordered list) and
  • (list item) elements to create bulleted lists.
    • Item 1
    • Item 2
    • Item 3
  • * div: Use the element to group and style content.

This is a div element with styled content.

By combining these elements, you can create rich and interactive web pages with HTML.

Step 3: Styling Your HTML Document

To style your HTML document, you can use CSS (Cascading Style Sheets) to control the appearance and layout of your content. Here's an example of how you can add CSS to your HTML document:

* Create a new file and save it as styles.css.

* Add the following CSS code to style your HTML document:

* body { font-family: Arial, sans-serif; background-color: #f0f0f0; color: #333; } h1 { color: #007bff; } p { font-size: 16px; } img { max-width: 100%; height: auto; } a { color: #007bff; text-decoration: none; } ul { list-style-type: disc; } div { border: 1px solid #ccc; border-radius: 5px; padding: 10px; }

* Link the CSS file to your HTML document by adding the following line inside the element:

By linking the CSS file to your HTML document, you can apply styles to elements such as the body, headings, paragraphs, images, links, lists, and divs. This allows you to customize the appearance of your web page to create a visually appealing design.

Step 4: id, class and Attributes

HTML elements can have attributes that provide additional information about the element. Here are some common attributes you can use:

* id: The id attribute uniquely identifies an element on the page.

Section 1

#section1 { color: red; } document.getElementById("section1").innerHTML = "Updated Section 1";

* class: The class attribute assigns one or more classes to an element, allowing you to style multiple elements with the same class.

This paragraph is highlighted.

.highlighted { background-color: yellow; } var elements = document.getElementsByClassName("highlighted"); for (var i = 0; i < elements.length; i++) { elements[i].style.color = "blue"; }

* style: The style attribute allows you to add inline CSS styles to an element.

This paragraph is red.

* src: The src attribute specifies the URL of an external resource, such as an image or script.

* alt: The alt attribute provides alternative text for images, which is displayed if the image cannot be loaded.

By using these attributes, you can enhance the functionality and appearance of your HTML elements, making your web pages more interactive and accessible.

Step 5: Additional HTML Features

HTML offers a wide range of features and elements to enhance the functionality and interactivity of your web pages. Here are some additional HTML features you can explore:

* Forms: Use the element to create interactive forms for user input. Name: Submit

* Tables: Use the , , , and elements to create structured data tables. John Doe 30 Jane Smith 25

* Semantic Elements: Use semantic elements like , , , , , and to provide meaning and structure to your content.

Website Header

Article Title

Name Age

Article content goes here.

© 2025 Website Footer

header { background-color: #333; color: white; padding: 10px 0; text-align: center; } nav { background-color: #444; overflow: hidden; } nav ul { list-style-type: none; margin: 0; padding: 0; } nav ul li { float: left; } nav ul li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } nav ul li a:hover { background-color: #555; } article { padding: 20px; background-color: #f9f9f9; margin: 20px 0; } footer { background-color: #333; color: white; text-align: center; padding: 10px 0; position: fixed; width: 100%; bottom: 0; }

Conclusion

Congratulations! You have completed a basic HTML crash course, covering the essential elements and steps to create a simple web page. By mastering HTML, you can build and design websites with structured content and styling. Keep practicing and exploring more advanced HTML features to enhance your web development skills. Happy coding!



Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe

Weitere Episoden von „Weekly Code Quickies“