Basic Elements

this is a video about elements

Basic Elements

<html> - the opening tag on every html page. It tells the browser that this is an html file.
<head> - indicates the head section of the document. Nothing within the head tag actually shows up on page, but this is where designers can store information about the title or special search terms associated with the page.
<title> - indicates the title of the page. This title does not show up on the page itself, but in the top title bar or tab of the browser. The title should reside in the head section of the document.
<body> - indicates the beginning of the section with content in it. There should be no content between the <head> or <body> sections of the page. The attribute bgcolor can be used within the body tag to change the background color of the page. You can use the six-character hexidecimal code (see the websites that provide HTML Color Picker) or you can use a limited number of words to describe color, i.e. red, blue, light blue, orange, etc.
- - <body bgcolor="#AA11CC"> or <body bgcolor="red">
<strong> creates bold text
<em> creates italic text
<h1>, <h2>, <h3>…<h6>, etc. – indicates a level of heading size. Use headings as you would an outline, giving the smallest number to the item of the top importance and so on. You will control the size and typeface later in CSS.
<p> - indicates the opening of a paragraph; puts space between it and the previous content creating a new block of text.
<br /> - provides a line break without the spacing of a paragraph; use the closing slash within the element to close it. This is an example of a standalone tag, because there is no text being surrounded by it, nothing to "mark up."

Format of an HTML file

Since we are making web pages each page is its own file that gets stored on your computer. Just like word documents end in .docx or moving pictures are saved as .gif, if we want to save a web page it ends in .html

NOTE: the homepage of any website will always be called index.html. This is the default filename for the home page when it is on the Web. Other pages on your site can be named whatever you want, but they will always end in the .html file extension. For consistency and easy troubleshooting, filenames should be lowercase with no spaces.

Copy and paste all the code in the Code Sample below into repl.it.

Hit the Run button and see the website that you just created! (it should look like the blue picture below)

You should see the file render with the title, background color and heading and paragraph formats. Notice the structure of the page, the opening html element, the head and body sections, the use of the bgcolor attribute and the way that all elements are closed around the content it modifies.

Play with some additional headings, like h3, h4, to see how they work and change the bgcolor value. Feel free to add or change content to make the page your own!

<html>

<head>

<title>My First Web Site</title>

</head>

<h1>My First Web Site</h1>

<p><strong>Welcome to my first Web site!</strong></p>

<h2>Introduction</h2>

<p>This is my place on the Web to let you know what is going on with me!</p>

<h2>Education</h2>

copy/paste this code into repl.it

Your page should look something like this when you run it in repl.it. Don't worry that it's not that elaborate yet. You'll be learning to add tables, images, videos, styles, etc as we go along

Page updated

Report abuse