In this free 14 days course web design tutorial or html tutorial, you will master or learn html web design using HTML, Javascript and CSS.
This course is mainly focused on steps by steps approach that you can used to design a functioning static website.
This web design course is programme to end in 14 days after which you will be proud to call yourself a web designer.
Our task in this course is focused on static website and the site you will be working on is music featured site. Where you will display list of musicians e.g name and pictures, lastest songs, last seen on stage and so on.
Day 1 Content
Day 1: Introduction to HTML
What is HTML?
What is Definition of HTML?
What is HyperText in HTML?
What is Markup in HTML?
What is HTML Language?
What are HTML Elements?
A Simple HTML Document Structure Example
Requirements for this Course
Starting the Site Design
Site Preparation
HTML is an acronym for Hyper Text Markup Language. HTML is known to be the standard markup language used for creating Web pages as well as describes the structure of a Web page.
1. Hyper Text
2. Markup
3. Language
HyperText is a technique by which you as internet user navigates around on the web by clicking on hyperlinks which takes you to the destination page. When it comes to HyperText, there is no predefined order for doing things. Meaning you can go to any place you choose on the Internet whenever you want by clicking on anchor links.
HTML markup codes or tags tells the browser to format the text between opening and closing tag by applying any styles specified by the web designer to the text or characters appearing between them. Markup codes, also called HTML tags or elements, are always enclosed inside "<" and ">" symbols to set them apart from the text content to which they apply.
In other words, Markup is what HTML tags do to the text inside them. They mark it as a certain type of text (bold text, for example).
<![CDATA[<b>HTML tutorial</b>]]>
HTML is a Language because it has syntax or code-words like any other language.
HTML is made up of series of elements and these elements instruct the browser how to display or render the page's content.
An HTML element is consists of start tag, content or text, and an end tag:
<![CDATA[<tagname>tag contents</tagname>]]>
The HTML element consists of everything between the start tag to the end tag but not all HTML tags have closing tags. Elements without closing tags are referred to as empty elements. In other words, they do not have an end tag!
Example of HTML tags with closing tags
<![CDATA[
<b>I like bold text</b>
<p>This is a paragraph</p>]]>
Example of HTML tags without closing tags
<![CDATA[<br>, <hr> e.t.c]]>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
</body>
</html>
You must have heard of HTML 5 right? HTML 5 has many features that almost all modern browsers support.
In the HTML structure given above,
the
<![CDATA[<!DOCTYPE html>]]> declaration tells the browser that this document is an HTML5 document and should be treated as such.
The
<![CDATA[<html>]]> tag is the root element of an HTML webpage
The
<![CDATA[<head>]]> tag is where meta information about the HTML page such as title, description, keywords, JavaScript, CSS e.t.c are placed
The
<![CDATA[<title>]]> tag indicates the title of the HTML page. In other words, it is what you see in the browser's title bar
The
<![CDATA[<body>]]> tag contains the document's content, and is a container for all contents, such as images, headings, links, tables, buttons etc.
- Laptop, Desktop computer or any phone that can accept application installation. For Android phones, go to Google play store and download Notepad++
- Text Editor: Text editors are computer programs designed for producing text or html documents e.g notepad, sublime e.t.c
- Web Browsers: Web browser is a computer program designed mainly for reading and displaying HTML documents in the right format e.g Firefox, Chrome, Safari e.t.c. However, browsers does not display the HTML tags, but uses them to determine how the page should be rendered and displayed. When a web browser want to display a webpage, it ignores everything outside the body tag and display everything within the body tag.
We have learnt so far and now we want to dive into the site design. As I said earlier, we are working on music site where you can show celebrities details such as name, latest song or movie, last seen on stage e.t.c as well as give users ability to download favorite songs.
I have name this site XploreMusic but you can use any name if you want to design your own site.
-
Create a folder with a name "XploreMusic" on your desktop,
- Inside the XploreMusic folder, create sub-folders as follows:
- Images: Where all images will be saved
- Audio: Where all audio files will be saved
- Videos: Where all video songs will be saved
- CSS: Where we will save our CSS file
- Script: Where we will save our javascript file
You can check
here should in case you don't know how to create a folder
Now type the following as shown below
<!DOCTYPE html>
<head>
<title>Xplore Music</title>
</head>
<body>
<b>Introduction to HTML</b>
</body>
</html>
-
Now that you have typed the above, click on file menu, then Save As
- Locate the XploreMusic folder on the desktop and open the folder
- Enter the filename in the filename field
- Change Save As to All files and press enter from the keyboard
Day 2: 15-07-2020
Task: Welcome Page Design, CSS
Your duty: Look for top celebrities and download their pictures then save to Images folder created by you above.