This article is a quick guide that goes over syntax and concepts taught in the HTML 1 course.
Last updated - July 22, 2024
Table of Contents
Header
HTML Structure
Inline Styles
HTML Title
Paragraphs
Breaks and Dividers
Lists
Links
Images
Buttons
Videos
Image Link
Marquees
Headers
Header tags are used to display titles and subtitles on a webpage. There are 6 levels of header tags. The lower the number, the larger the text.
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
HTML Structure
Below is a basic HTML structure example.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Inline Styles
Inline styles are CSS code written in an HTML tag via the style attribute.
| <h1 style ="color: blue;">Hello!</h1> | The color property is used to change the color of text. |
| <h1 style ="font-family: ariel;">Hello!</h1> | The font-family property is used to change the font family. |
| <h1 style ="font-size: 20px;">Hello!</h1> | The font-size property sets the size of the font. |
| <body style="background-color: green;" ></body> | The background-color property sets the background color of an element. |
| <body style="background-image: url("");" ></body> | The background-image property sets an image as the background of an element. The image link goes in the url() value. |
| <h1 style ="text-align: center;">Hello!</h1> | The text-align property sets the horizontal alignment of text. The basic values are left, center, and right. |
Title
The <title> tag is used to define a title of a document. The <title> tag goes in the <head> tag.
<head>
<title>This is my title!</title>
</head>
Paragraph
The <p> tag is used to add body text to a page. <p> tags go in the <body> tag.
<body>
<p>My text goes here!</p>
</body>
Breaks and Dividers
The <br> tag adds a line break. The <br> tag doesn't need a closing tag.
<h1>Here is my heading!</h1>
<br>
<p>My paragraph will go here.</p>
The <hr> tag, or horizontal rule, adds a horizontal line and a line break.
<h1>Here is my heading!</h1>
<hr>
<p>My paragraph will go here.</p>
Lists
List items are inserted using the <li> tag. Lists have a parent tag of <ol> for an ordered list or <ul> for an unordered list. Ordered lists have numbers before each item and unordered lists have bullet points before each item.
<ol>
<li>List item #1</li>
<li>List item #2</li>
<li>List item #3</li>
</ol>
<ul>
<li>List item #1</li>
<li>List item #2</li>
<li>List item #3</li>
</ul>
Links
The <a> tag contains a clickable link that directs to a section on a webpage, a different page on the same website, or a different website completely. The URL goes in the "href" attribute.
<a href="www.website.web">Click here!</a>
Images
The <img> tag adds images to a page. An <img> tag needs a "src" attribute that contains the image URL. Image tags don't need closing tags.
<img src="image.jpg">
Buttons
The <button> tag creates a clickable button.
<button>Click Here!</button>
The "onclick" function allows JavaScript to be run when the button is clicked. The onclick function goes within the opening <button> tag.
<button onclick="alert('Hello there!')">Click Here!</button>
Videos
The <iframe> tag adds videos to a webpage. The src attribute with the video URL will need to be included in the <iframe> opening tag.
<iframe src="www.my_video.web"></iframe>
Image Link
A clickable image that links to another webpage can be created by using the <a> tag along with the <img> tag. The <a> tag anchors (links) to an external URL. The <img> tag will go between the <a> opening and closing tags.
<a href="web link goes here" target="_blank">
<img src="image source goes here">
</a>
Marquees
The <marquee> tag creates text that slides across the screen in set directions.
<marquee direction="right"
scrollamount="20px"
behavior="alternate">Text goes here</marquee>
Marquee attributes include:
- direction - Determines direction of movement.
- scrollamount - Determines how fast the content will move per second.
- behavior - Sets how the text will move.