Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Introduction to HTML for Structuring Content | Website Anatomy
AI Powered Web Development Essentials

book
Introduction to HTML for Structuring Content

HTML, the foundation of web pages, defines their structure and content. Think of it like a house's foundation, walls, door, and roof.

At its core, HTML consists of elements enclosed within angle brackets (<>) and typically come in pairs - an opening tag and a closing tag. These elements form a hierarchical structure, with some elements nested within others to create a meaningful layout.

Example:

Please click the Run Code button to see the website in action.

html

index.html

copy
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text.</p>
</body>
</html>

Adding Different Tags in HTML

In HTML, we can use various tags to add different types of content to the web page. Here's how we can add text, images, links, and more:

Adding Text

To add text to the web page, we can use the <p> tag for paragraphs, <h1> to <h6> for headings of different levels.

html

index.html

copy
<p>This is a paragraph of text.</p>
<h1>This is a main heading</h1>
<h2>This is a subheading</h2>

Adding Images

To add images, we can use the <img> tag. Specify the image's source (src attribute) and optionally include attributes like alt for alternative text and width and height for dimensions.

html
<img src="image.jpg" alt="Description of the image" width="300" height="200" />

Adding Links

To add hyperlinks to other web pages or resources, we can use the <a> tag. Specify the URL of the destination page using the href attribute.

html

index.html

copy
<a href="https://www.example.com">Visit Example Website</a>

Adding Lists

To create ordered (numbered) or unordered (bulleted) lists, we can use the <ol> and <ul> tags, respectively. Inside these tags, use the <li> tag for each list item.

html

index.html

copy
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

Adding Forms

To create forms for user input, we can use various form-related tags like <form>, <input>, and <button>.

html

index.html

copy
<form>
<input type="text" name="username" placeholder="Enter your username" />
<input type="password" name="password" placeholder="Enter your password" />
<button type="submit">Submit</button>
</form>

We can add a wide range of content to the web page using these HTML tags, from simple text and images to interactive forms. Below, you can find the website with considered tags.

html

index.html

copy
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<a href="https://www.google.com/" target="_blank">Visit Google home page</a><br>
<img
src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/2d218c15-0264-4b7d-afb6-e91ad4a42daa/section-2/image-example-dog.jpg"
alt="Puppy in a suit"
width="240"
/>
</body>
</html>

Video Tutorial

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 2. Kapitel 2
some-alt