Embedded Files
Introduction
Introduction
What is HTML?
What is HTML?
Hypertext Markup Language (HTML) is a markup language for creating web pages. It describes the structure of a web page using elements represented by tags. For example, we can deconstruct any website into elements by its title/header, the main content, and often a footer.
CSS and JavaScript
CSS and JavaScript
It is often used in combination with CSS for styling and JavaScript for an interactive webpage. Without CSS and Javascript, web pages look simple and have only basic functions.
For example, here is what a page with only HTML would look like.
Code
Code
Elements
Elements
Webpages are made up of various elements. For instance, think of a google search. There's the header with the Google logo
Most tags come in pairs with information sandwiched between them and are formatted like this: <tagname>Information</tagname>. The second tag in the pair has a forward slash, indicating that it is the end tag of the pair. However, not all tags come in pairs--some stand alone.
Set Up
Set Up
To create a HTML document, the first thing to code at the top is <!DOCTYPE html>. This declares that the document is an HTML5 file. There are different versions of HTML, but HTML 5 is the most recent version.
Next, create an overall encompassing <html></html> tag. The information for the rest of your page should be enclosed within these tags.
There are also <head></head> and <body></body> tags. Head tags are used to contain meta information that is not necessarily displayed on your web page. The body tag contains information that is displayed on your page.
Note that indentation doesn't matter too much in HTML, it's more for readability.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Head Tag
Head Tag
The head tag contains meta information for the browser.
The title tag allows the browser to display a title at the top of the web page tab.
<!DOCTYPE html>
<html>
<head>
<title>GamesCrafters::Home</title>
</head>
</html>
Body Tag
Body Tag
The body tag contains all the content to be displayed on your web page.
Tags that come in pairs:
Paragraph (p) tags can be used for paragraphs.
Header tags (h#) are used to indicate headings and subheadings.
A tags are used to link to other web pages.
There are also numerical/ordered and bulleted/unordered lists (ul), where each item is created using list (li) tags.
Tags that come single:
Break (br) tags are used to space out items on a page
Divider (div) tags are used to indicate a divide between elements on a page.
<!DOCTYPE html>
<html>
<body>
<p>Paragraph</p>
<h1>Header 1</h1>
<h3>Header 3</h3>
<h6>Header 6</6>
<br>
<a href="http://gamescrafters.berkeley.edu/">GamesCrafters!</a>
<ul>
<li> This is an <li>
<li> unordered list </li>
</ul>
<div>
<ol>
<li> This is an </li>
<li> ordered list </li>
</ol>
</body>
</html>
These are the most basic elements for creating a web page, but there are many more out there that can be used!
Report abuse