Scribd
Upload
10 views3 pages

Programmation HTML by Shika Hinugera Ve

This document introduces web programming using HTML, explaining its role as the structural foundation for web pages. It covers basic HTML tags, provides an example of simple HTML code, and outlines steps to test the code in a browser. The document concludes by encouraging practice and hints at future lessons involving CSS and JavaScript.

Uploaded by

dilann869
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views3 pages

Programmation HTML by Shika Hinugera Ve

This document introduces web programming using HTML, explaining its role as the structural foundation for web pages. It covers basic HTML tags, provides an example of simple HTML code, and outlines steps to test the code in a browser. The document concludes by encouraging practice and hints at future lessons involving CSS and JavaScript.

Uploaded by

dilann869
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

SHIKA HINUGERA

Introduction to Web Programming with HTML

Introduction
Hello everyone! Today, we’re going to take our first steps into the exciting world of creating
websites. You’ve probably visited many sites on the internet, and you may have wondered
how they’re made. Well, the answer is simple: by using a language called HTML.

What is HTML?
Imagine you’re building a house. You need a structure, like walls and a roof, to hold every-
thing together. In web programming, HTML is that structure. It’s a language that tells the
computer how to organize the content of your web page.
HTML stands for HyperText Markup Language. Don’t worry, it’s less complicated
than it sounds.

HTML Tags: The Building Blocks


In HTML, we use tags to structure the content. Think of tags as labels that tell the
computer: “this is a title,” “this is a paragraph,” “this is an image,” etc.
Here are some basic tags that you’ll be using:

ˆ <html>: This tag tells the computer that all the code inside is HTML. It’s like the
beginning of your house.

ˆ <head>: This is the head of your web page. We put information like the title of the
page here.

ˆ <title>: This is the title of your web page, the one that appears in the browser tab.

ˆ <body>: This is the body of your web page. This is where you put all the content you
want to display: text, images, etc.

ˆ <h1>, <h2>, <h3>... <h6>: These are the tags for headings. <h1> is the most important
heading, <h2> a bit less, and so on.

ˆ <p>: This is the tag for paragraphs of text.

ˆ <img>: This is the tag for displaying an image. We need the address (URL) of the
image for it to work.

ˆ <a>: This is the tag for creating links to other pages.

January 23, 2025 Page 1


SHIKA HINUGERA

Example of Simple HTML Code


Here’s a small example so you can see what HTML code looks like:
<! DOCTYPE html >
< html >
< head >
< title > My First Web Page </ title >
</ head >
< body >
< h1 > Welcome to my page ! </ h1 >
<p > This is a paragraph of text . It explains how HTML works . </ p >
< img src = " your_image . jpg " alt = " Description ␣ of ␣ the ␣ image " >
<a href = " https :// www . google . com " > Click here to go to Google </ a >
</ body >
</ html >

What does this code do?


ˆ <!DOCTYPE html>: This tells the browser that it’s an HTML5 document.

ˆ <html>: The beginning of the HTML document.

ˆ <head>: The head of the document where we put information about the page.

– <title>My First Web Page</title>: The title of the page that appears in the
browser tab.

ˆ <body>: The body of the document where we put the visible content.

– <h1>Welcome to my page!</h1>: A level 1 heading.


– <p>This is a paragraph of text...</p>: A paragraph of text.
– <img src="your image.jpg" alt="Description of the image">: An image
(you need to replace "your image.jpg" with the path to an image).
– <a href="https://www.google.com">Click here to go to Google</a>: A link
to Google’s website.

How to Test Your HTML Code?


1. Open a text editor: You can use a simple editor like Notepad (Windows) or TextEdit
(Mac), or a more advanced code editor like Visual Studio Code (recommended).

2. Copy the HTML code: Copy the example code above and paste it into your editor.

3. Save the file: Save the file with the .html extension. For example, my page.html.

4. Open the file with your browser: Go to the folder where you saved the file, and
double-click on it. Your browser will open it and display your web page.

January 23, 2025 Page 2


SHIKA HINUGERA

What You Can Do With HTML


With HTML, you can:

ˆ Organize text with headings and paragraphs.

ˆ Add images and videos.

ˆ Create links to other pages.

ˆ Structure your page into different sections.

Next Steps
Today, we’ve seen the basics of HTML. In the next lessons, we’ll learn to make our web
pages more beautiful with CSS, and to make them interactive with JavaScript.
Don’t hesitate to ask questions and try to modify the code to see what happens. The
best way to learn is by practicing!

January 23, 2025 Page 3

You might also like