<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
</head>
<body>
Hello World!
</body>
</html>
This code provides a webpage that can be seen at the following link Link to simple.html. Remember that you can right click on a webpage and view the source code.
Above is the code for the simplest webpage you can have. Every webpage contains these elements, so we will explain them in detail.
The first line <!DOCTYPE html> tells us we are using version HTML5.
The second and ninth line <html lang="en-us"> and </html> show the beginning and end of html code. We are using the English language.
The third and fifth line <head> and </head> contain information about the page title, character set (utf-8), author, description, keywords, type of page viewing (viewport), and a list of styles used in the page. In the code above we only see the character set <meta charset="utf-8">.
The sixth and eight line <body> and </body> is where everything you see on a page is listed. It is in Html code.
Open the Documents folder in File Explorer and create a folder called test1. Create an index.html file in the test1 folder. Copy and paste the simple webpage into index.html. Save the file. You can do this in File Explorer or in the Visual Studio Code editor, as explained in the VSCode section. Double click on index.html to open the file in a browser. You will see the following words in the browser.
Hello World!
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Visual Studio Code Editor</title>
<meta name="description" content="Visual Studio Code editor is a free webpage development tool. We describe its installation, and creation of a simple webpage.">
<meta name="keywords" content="HTML, CSS, webpage, visual, studio, editor, development">
<meta name="author" content="Author name">
</head>
<body>
Hello World!
</body>
</html>
This code provides a webpage at the following link Link to simple-meta.html.
The first meta tag is the characterset. It is always the same.
The second meta tag, viewport, tells how the page will be displayed in the browser. It is always the same.
The third tag is the title. It can be 50-60 characters long.
The fourth meta tag, description, can be 150-160 characters long.
The fifth meta tag, keywords, help for placement in search engines. 100-255 characters.
The sixth meta tag is the author.
Open the Documents folder in File Explorer and create a folder called test2. Create an index.html file in the test2 folder. Copy and paste the simple webpage with into index.html. Save the file. Double click on index.html to open the file in a browser. You will see the following words.
Hello World!
Meta tags are important for placement of your webpage in search engines, such as Google.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Visual Studio Code Editor</title>
<meta name="description" content="Visual Studio Code editor is a free webpage development tool. We describe its installation, and creation of a simple webpage.">
<meta name="keywords" content="HTML, CSS, webpage, visual, studio, editor, development">
<meta name="author" content="Author name">
</head>
<body>
<h2>A Simple Web Page Heading</h2>
Hello <b>World!</b>
This is more text.
<br>This is line break, so this text is on next line.
<p>This is a new paragraph.</p>
<a href="https://www.google.com">Link to google web page.</a> We can also link to a page within our website.
</body>
</html>
This code provides a webpage at the following link Link to simple-html.html.
There is an important point about spaces in HTML, ONLY CODE SPACES BETWEEN WORDS COUNT! If you want more spaces between words you must use the tag . The same is true of blank lines. Use the line break <br> twice to create a blank line.
The tags <h2> </h2> are used to signify a bolded heading on a new line.
The tags <b> </b> are used to bold characters or words.
The single tag <br> is used to end a line, and start text on new line. It is called a line break.
The tags <p> </p> are used for new paragraphs.
The tag <a href="https://www.google.com">Link to google web page.</a> is a link tag. After href the web address in placed. Next a descriptive phrase is written. Only the descriptive phrase shows in the web page. Clicking on the descriptive phrase will send you to the web address, or link.
Open the Documents folder in File Explorer and create a folder called test3. Create a index.html file in the test3 folder. Copy and paste the simple webpage with HTML tags into index.html. Save the file. Double click on index.html to open the file in a browser. View the resultant webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Visual Studio Code Editor</title>
<meta name="description" content="Visual Studio Code editor is a free webpage development tool. We describe its installation, and creation of a simple webpage.">
<meta name="keywords" content="HTML, CSS, webpage, visual, studio, editor, development">
<meta name="author" content="Author name">
<style>
body {
font: normal, arial
}
#pborder {border-style: ridge;}
</style>
</head>
<body>
<h2>A Simple Web Page Heading</h2>
Hello <b>World!</b>
This is more text. <br>This is line break, so this text is on next line.
<p id="pborder">This is a new paragraph.</p>
<a href="https://www.google.com">Link to google web page.</a> We can also link to a page within our website.
</body>
</html>
This code provides a webpage at the following link Link to simple-styles.html.
CSS is an abbreviation for cascading style sheet. You will see the style tags <style> and </style> in the code above. Notice that style tags are nested in the head tags.
Notice the first style is implemented for body and describes the font for the entire text in the body of the page. Note that body is not an HTML tag; it belongs to style. Remember the HTML bold tags? Even though we dictate in styles that the font for the whole body is normal, arial; there will still be bolded text. The inline bold takes precedence.
The second style is called #pborder and starts with a hashtag. The hashtag means it is called a style selector of the ID type. pborder is a made up name. For me it is an abbreviation for paragraph border. When we use the words id="pborder" in the body of the text, a border will be applied to the paragraph.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Visual Studio Code Editor</title>
<link href="styles.css" type="text/css" rel="stylesheet" />
<meta name="description" content="Visual Studio Code editor is a free webpage development tool. We describe its installation, and creation of a simple webpage.">
<meta name="keywords" content="HTML, CSS, webpage, visual, studio, editor, development">
<meta name="author" content="Author name">
<style>
</style>
</head>
<body>
<h2>A Simple Web Page Heading</h2>
Hello <b>World!</b>
This is more text. <br>This is line break, so this text is on next line.
<p id="pborder">This is a new paragraph.</p>
<a href="https://www.google.com">Link to google web page.</a> We can also link to a page within our website.
</body>
</html>
Commonly the styles will be placed in an external text file called styles.css. Just place a link to the file between the head tags, just below the title tag.
<link href="styles.css" type="text/css" rel="stylesheet" />
The webpages I have used in this website use internal CSS styles, not external style sheets.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Visual Studio Code Editor</title>
<meta name="description" content="Visual Studio Code editor is a free webpage development tool. We describe its installation, and creation of a simple webpage.">
<meta name="keywords" content="HTML, CSS, webpage, visual, studio, editor, development">
<meta name="author" content="Author name">
<style>
body {
font: normal, arial
}
#pborder {border-style: ridge;}
</style>
</head>
<body>
<h2>A Simple Web Page Heading</h2>
Hello <b>World!</b>
This is more text. <br>This is line break, so this text is on next line.
<p id="pborder">This is a new paragraph.</p>
<a href="https://www.google.com">Link to google web page.</a> We can also link to a page within our website.
<img src="images/logo2crop-line.jpg" alt="thesurfdragon logo"/>
</body>
</html>
The above code has a displayed webpage at the link Link to simple-photo.html. The HTML tag for this image is:
<img src="images/logo2crop-line.jpg" alt="thesurfdragon logo"/>
.Where the tag img stands for image. src stands for the source of the image. alt stands for alternate text. If your image does not display, the alt text will be shown. It is important to use a text description of your image for search engines, such as Google.
Notice the src of the image is images/logo2crop-line.jpg. Images is a folder in the same folder as the HTML page. Images contains all pictures or images for the folder you are working in. Note that you can get free images from https://unsplash.com. Logos can be created in Linux GIMP, which is similar to Photoshop. GIMP can be downloaded for free to your Ubuntu desk or laptop.
Home Page
Visual Studio Code
Simple Webpage
Website Structure
Webpage Layout
HTML Escape
Web Hosting
FTP
Using Paint 3D
Printer Friendly
