Web Development Using HTML & CSS

In this section you are going to learn the basics of Web development using HTML & CSS and be able to code those two programming languages: HTML and CSS. Using these programming languages, you are going to create programs that run on the Internet. You can create a website, app, game and many other programs that will run in your web browser.

What is a Web Browser ?

Web browsers are computer programs that allow us to view web pages none as “Web Sites”. You have probably come across web browsers such as Google Chrome, Microsoft Internet Explorer, Safari and Mozilla Firefox, and used them to access all sorts of different websites. Your web browser uses a web address to ﬁnd the web page you want on the web. It then accesses the information for the web page using another program, called a web server. What is a Web Server? .

Servers are computers that provide other computers with information. A web server can either be
hardware (a computer) or software (a program) that helps to deliver a web page to your browser. To access a web page, your web browser has to connect to that page’s web server. The program running on the web server then ﬁnds the web page your browser has requested. It then sends the web page to your computer as HTML code.

Web Page

This refers to a single page when you open a website in your browser. that is Web page. Moreover Web Pages are those that make up a website. When the web server sends your web browser a web page, it sends the information in a HTML document. while HTML documents are made up of HTML elements, such as text and images, as well as exact instructions for the browser about how to display and position the elements on-screen. When a web browser reads the instructions in the HTML code, we say the browser “parses“ the HTML document. As it parses and decodes the instructions, the browser draws each element of the document on-screen. A HTML document could contain just a few words of text.

HTML

Today, nearly all web pages are written using HTML (HyperText Markup Language) code. HTML was developed by Tim Berners-Lee in the early 1990s. HTML is a great way of creating the basic structure of your web page. HTML documents are made up of individual HTML elements. Elements are created using
opening and closing tags. Each tag is the name of the element enclosed in angle brackets (< >). The content goes between the tags. Each HTML tag is an instruction to your web browser, telling it how to
show the content on your screen. Tags allow you to add text, images and videos to your web page and divide information into sections, such as lines or paragraphs. Below is a simple HTML code.
walker books

How can we Write HTML Code?

Firstly You need a device – either computer or android phone
Text Editor – Like Notepad, or Vscode(for PC) or anWriter (for android Devices)
Browser – it can be chrome or Firefox

We would use the text editor to write our code, and the browser to see the output of our code

Steps to Write your own first HTML website

Turn on your PC and click on windows icon then type notepad, click on it to open you would see something like this:

notepad first view on windows 10 — Notepad on window 10

copy and paste this HTML code on your notepad

<html>

<head>

<title> Hello World </title>

</head>

<body>

<h1>My First HTML Web Page</h1>

<p>I Start learning web development using HTML at Sadeeq Tech.</p>

</body>
</html>

after you paste then click ctrl + s or click on file > save as > then type the name of your HTML file .HTML, you can name it anything you want, but at the end of the name add .HTML, EXAMPLE: index.html this is the common name for naming HTML home page file. and . HTML Is the extension of HTML.

after you save it go to the folder you save the HTML file, if you already have a browser on you computer, then just double click on that index.html file you just created or whatever .html and it will open in browser. now you can see the output of what you paste in the notepad.

Explaining the Basic HTML Tags

We start with <html> tag: – The HTML document starts with <html> and ends with </html>.

<Head> tag: – this tag is a container for metadata (data about data) and is placed between the <html> tag and then the <body> tag, it is the second tag you would put after <html> tag. (Metadata is data about the HTML document. like title, e.t.c)

<title> tag : – this tag is placed inside the <head> tag. and it defines the HTML page Header text that appears at the top of the Browser tab.
<body> tag: – it is the visible part of the webpage, most of your html tags are placed in between<body> to </body> tags.
<h1> tag: – refers to as Heading, we use them mostly for title of a web page. the <h1> tag is the biggest one and is the tag to filter the most important heading. followed by <h2> Up to <h6>

you can se the difference by pasting below code to you HTML file inside the body tag

<h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6>

<p> tag: – use to make a paragraph, you can type no matter how long your text is in between the<p> to </p> tags

Some tags in HTML tags require closing tags using back slash (/) like this </h1> to close<h1> tag, but some didn’t like the <br> tag use to break line in a text or paragraph.