JUDY'S HTML TUTORIAL MENU CREATING YOUR FIRST WEB PAGE The best way to make a web...

Question

Question

JUDY'S HTML TUTORIAL MENU CREATING YOUR FIRST WEB PAGE The best way to make a web...

JUDY'S HTML TUTORIAL

MENU

CREATING YOUR FIRST WEB PAGE

The best way to make a web page is to just dive right in. Open Notepad. To open notepad in Windows, click the windows icon in the lower left corner of the screen and then type "notepad."

Notepad is a text editor. Other text editors you may consider are TextPad, Sublime Text, or NotePad++. Do not use Word or WordPad; they are word processors. If you are using an Apple computer I suggest you use Sublime.

Once notepad is open, start typing (or if you're lazy, like me, just copy and paste):

<html>

<head>
<title>The title goes here</title>
</head>

<body>

<h1>This is a level one heading</h1>

<p>My first lovely paragraph. Wow. This is fun.</p>

<p>My second lovely paragraph. We can make paragraphs forever.</p>

<h2>This is a level two heading</h2>

<p>This is my third paragraph. Notice how the paragraph tag sets off the text. Also notice that every beginning tag has an ending tag.</p>

</body>

</html>

What does all this mean? The stuff between the < and the > symbols are "tags." Tags (mostly) come in pairs, a beginning tag and an ending tag. The ending tag repeats the beginning tag, with a forward slash in it. For example, the web page starts with <html> and ends with </html>.

Each web page has two parts:

The head, which begins with <head> and ends with </head>, and
The body, which begins with <body> and ends with </body>

Beginning to get the idea? It's easy.

So what goes in the head? The title. The title is what appears in the tab, at the top of the browser. Everything else goes in the body, that is, between the body tags.

Most of what you have to say goes in paragraphs, just like in real life. A paragraph starts with <p> and ends with </p>. You can also put stuff between heading tags, which come in various sizes, from <h1>, <h2>, ... through <h6>. Headings are usually used for, well, headings. The <h1> heading will make text bold and large. <h2> is a little smaller, and so forth. <h6> headings are quite small. Now, it may seem like a heading tag would go in the head, but it doesn't. Headings go in the body, just like everything else (except the title).

After you create the web page, you must name it and save it. Naming a web page the right way is critical, so we devote a whole section to naming. Read on.

NAMING YOUR PAGE

Before you name your web page, create a folder to hold all of your web pages. The folder can be anywhere ( a: drive, c: drive, flash drive), it doesn't mater. Just be sure you know where it is so you can find it again. Name the folder "website". Now you can save the text file that you just created using Notepad in the folder called "website." As you save the text file, name it "first.html".

The home page, or main page, of a website is typically named index.html. That is so the server hosting the website will serve the page up automatically. For example, a link to http://www.nvcc.edu will serve up (show the user) the page named index.html in the root directory: http://www.nvcc.edu/index.html.

Naming a web page correctly is easy if you follow these three rules:

No spaces
No capitals
The file extension is .html (that's dot html)

If you want to know the why behind these rules, read on.

Spaces in filenames can confuse browsers and email programs. Browsers usually substitute "%20" for a space. Email programs sometimes cut off URLs after a space. If you want to use a space for clarity, use a hyphen instead. For example, "onion recipe.html" becomes "onion-recipe.html"

Capitals matter. You're probably creating your first web page in a Windows operating system environment. If so, Windows is pretty lax about file names. But once you're done creating your page, and you upload it to a server (so that Aunt Tilly in Iowa can see it), the server may be using a different operating system, like Unix or Linux. Unix and Linux care about capitals. MyFile.html is a totally different file than myfile.html in a Unix or Linux environment. You can use capitals in your file names, but when you create your links (which we'll get to real soon), they won't work if your link file name doesn't match your actual file name, exactly. If you use all lowercase, you don't have to try to remember "Did I use a capital or not?"

File extensions. Extensions matter. Your web page extension must be either .htm or .html. It doesn't matter which, but you've got to be consistent. If you create a link to myfile.html and the page is named myfile.htm, the link won't work. Convention is to use .html as the extension.

Ok, now that we've saved our first web page with the name "first.html" let's take a look at it in the browser.

VIEWING YOUR WEB PAGE IN A BROWSER

Now that we've created our web page with Notepad, and saved it as "first.html", we want to see what it looks like in the browser. The easiest way to open a webpage in a browser is to double-click on the filename. You can also right-click the name of the file, then choose either Firefox, Chrome, Safari, or another browser.

There, you've done it. You've made your first web page, and viewed it in the browser. Don't worry, we'll soon learn how to jazz it up.

engineering Computer-Science

Add a comment Improve this question Transcribed image text

Answer 1

Answer #1

Dear Student ,

As per the requirement submitted above , kindly find the below solution.

Here a new web page with name "first.html" is created, which contains following code.

first.html :

<html>

<head>

<title>The title goes here</title>

</head>

<body>

<h1>This is a level one heading</h1>

<p>My first lovely paragraph. Wow. This is fun.</p>

<p>My second lovely paragraph. We can make paragraphs forever.</p>

<h2>This is a level two heading</h2>

<p>This is my third paragraph. Notice how the paragraph tag sets off the text. Also notice that every beginning tag

has an ending tag.</p>

</body>

</html>

======================================================

Output : Open web page first.html in the browser and will get the screen as shown below

Screen 1 :first.html

NOTE : PLEASE FEEL FREE TO PROVIDE FEEDBACK ABOUT THE SOLUTION.

Add a comment

Answer 2

JUDY'S HTML TUTORIAL MENU CREATING YOUR FIRST WEB PAGE The best way to make a web...

Homework Answers

Add Answer to:
JUDY'S HTML TUTORIAL MENU CREATING YOUR FIRST WEB PAGE The best way to make a web...

Post as a guest

Earn Coins

HTML Decide on a subject for your first web page. All page content must be related...

Code for the movies page: <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />...

In this exercise, you’ll modify the Future Value Calculator application to include a header and footer....

Task 3: Creating a Simple jQuery Application 1. Launch HTML-Kit. 2. Create a new HTML file...

6. (HTML) Given the following HTML document: <html> <head> <title>Grandma Cafe</title> </head> <body> <h1>Menu</h1> <ol> <li>Café...

Hi, i was testing the first part of the question with this code and failed to download the web pa...

Create a CSS-styled Table Page For this Assignment you will first read the appropriate chapters in...

Javascript to edit a HTML file. Where to begin? <!doctype html> <html> <head> <meta charset="utf-8"> <title>TODO:...

Look at the following illustrated output for an HTML and a css given below <!DOCTYPE html>...

I'm having trouble to link the .js file to the html so changes for the html...

JUDY'S HTML TUTORIAL MENU CREATING YOUR FIRST WEB PAGE The best way to make a web...

Homework Answers

Add Answer to: JUDY'S HTML TUTORIAL MENU CREATING YOUR FIRST WEB PAGE The best way to make a web...

Post as a guest

Earn Coins

Add Answer to:
JUDY'S HTML TUTORIAL MENU CREATING YOUR FIRST WEB PAGE The best way to make a web...