HTML Tutorial for Beginners
Can you imagine launching your own website from scratch with no templates and knowledge of how it begins? Trust and believe, it takes plenty of practice and dedication. As you navigate each page, you will be able to build up your skills from each step.
HyperText Markup Language, commonly referred to as “HTML”, is the essential language on web design. It holds the content for any user to browse and enjoy. It is combined with “tags”, which describes the functionality of each related document.
Please select a topic to begin learning HTML basics:
-
local_offer Basic Tags and their Purpose
Web design for most people can be quite frustrating, and cause everyone to panic. That’s completely understandable, it is a new concept. By the end of this module, the learner will be able to design a website with a page title, header, body, and paragraph.
In this example below, you will notice some key words to describe the context on this “Financial Aid Related” site.
See the Pen YqPqBO by David Barker (@stammig) on CodePen.
<!DOCTYPE html> describes the type of web document. In this case, it is an HTML document.
<head> and </head> is the information within the document.
*Please note that the “forward slash” represents the conclusion of the tag.
<title> and </title> is defined as the title of your document
<body> and </body> represents that the information that the audience will actually view on the site
<h#> and </h#> is your document header. Please note in this example that there are two headers (i.e., <h1> and <h2>. When the audience views your web document, they will see two distinctive headers – based on its level of importance.
<p> and </p> is your paragraph.
Now that you have seen what the code can do and learned about the different structural tags it is time to try to build a simple web page. Go to the CSSDesk and try to create a simple web page with these details. Make sure to select reset in the upper right hand corner and to type your code in the HTML section in the upper left. As you type you will see the code rendered in the right hand window.
- <!DOCTYPE html>
- A <head> with a <title>
- A <body> section with 1 <h1> tag and 2 <p> tags
Did you have any problems? Did you remember to close all of your tags? What happens if you change the <h1> tag to a <h4>?
-
format_list_bulletedLists
Content coming soon!
-
linkLinking it All Together
Content coming soon!
-
insert_photoInserting Images
Content coming soon!
-
border_allCreating Tables
Content coming soon!
-
descriptionComplete the Forms
Content coming soon!
-
webMix it Up
Content coming soon!