simple web page html
DESCRIPTION
make a basic web pageTRANSCRIPT
Simple HTML
Lets make a web page with HTML!
• What is HTML anyway?
Reference: wikipedia
HTML • Hypertext Markup Language (HTML) is the predominant markup language
for web pages. HTML elements are the basic building-blocks of webpages.
• HTML is written in the form of HTML elements consisting of tags, enclosed in angle brackets (like <html>), within the web page content. HTML tags most commonly come in pairs like <h1> and </h1>, although some tags, known as empty elements, are unpaired, for example <img>. The first tag in a pair is the start tag, the second tag is the end tag (they are also called opening tags and closing tags). In between these tags web designers can add text, tags, comments, and other types of text-based content.
• The purpose of a web browser is to read HTML documents and compose them into visible or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page.
• HTML elements form the building blocks of all websites.
Reference: http://www.html.net/tutorials/html/lesson5.php
Tags?? <html> <head> <title>my cool web page! </title> </head> <body> <p>Please read the paragraphs on this great web page! </p> </body> </html>
One thing about tags
<html> …</html> <head> … </head> <title>… </title> <body> … </body> Most tags have a beginning and an ending element. There are a few standalone tags, but not many.
• Did you know that all the elements that make up an HTML document are nested inside each other in a very specific order?
http://cdn.furniturefashion.com/image/2010/07/natural%20wood%20nesting%20tables.jpg
Boxes? Containers? Nesting? <html> <head> <title>my cool web page! </title> </head> <body> <p>Please read the paragraphs on this great web page! </p> </body> </html>
source: mary_thompson http://motherhood.yourway.net/nesting-preparing-for-a-new-baby-part-1/
<html> <head> <title>my cool web page! </title> </head> <body> <p>Please read the paragraphs on this great web page! </p> </body>
</html>
<html> </html> Is the container for your entire web page – it must be present in all your pages in the proper order
<html> <head> <title>my cool web page! </title> </head> <body> <p>Please read the paragraphs on this great web page! </p> </body> </html>
<head> </head> <body> </body> There are two separate sections nested inside the html container. These are head and body.
http://coolnwacky.com/2468-head-body-art/
http://www.spiralezone.com/viewtopic.php?f=14&t=753&hilit=geek
http://www.zazzle.ca/head_body_tshirt-235947956382523507
<html> <head> <title>my cool web page! </title> </head> <body> <p>Please read the paragraphs on this great web page! </p> </body> </html>
Html container
Head container
Body container /
• A person’s head is always located on top of the body. It is the same way with an HTML page!
/
• Open a basic text editor such as Notepad or Notepad++ (we don’t do web design in word processors!)
• Open the window or folder where your files are. Make sure you can see file extensions.
• Open a web browser. • Do not work “full screen” – arrange these you
so can see all three at once.
Browser with the web page open in it
Folder with file sitting in it- make sure you can see your file extensions
Notepad++ with the page code
Open a web browser, a text editor such as Notepad and the folder where your files are sitting. Arrange these so you can see all three at the same time
• Make your own personalized webpage using the basic HTML you just learned. <html>
<head> <title>Jane’s cool web page! </title> </head> <body> <p>Please read these wonderful paragraphs on Jane’s great web page! </p> <p>Look at this – a second marvelous paragraph by Jane!</p> </body> </html>
Personalize the page title with your own name
Make 2 paragraphs and personalize both of them by adding your name.
Save the file as “index.html”
• Save it to a folder where you know where it is. • Make sure the file name has a “.html”
extension!- call it “index.html” • Drag and drop the file on top of a browser to
test it. • Always test your html files in a browser. • Here is a recommended working method:
1. Write code 2. Save 3. Test in browser 4. Repeat until done
Browser with the web page open in it
Folder with file sitting in it- note that you can see the file extension
Notepad++ with the page code
Title?
• In the head section, always write a title: <title>The title of your page</title>. Notice how the title will be shown in the upper left corner of your browser:
• The title is especially important because it is used by search engines (such as Google) to index your website and is shown in the search results.
Reference- http://www.html.net/tutorials/html/lesson5.php
Title?
• In the head section, always write a title: <title>The title of your page</title>.
http://www.html.net/tutorials/html/lesson5.php
Page title here
Domain name or URL here
Now that you have a basic web page, add more HTML elements to make your page more interesting.
1. Add a heading on the top of your page: <h1>This page is all about Me!</H1> 2. Add some horizontal rules between your paragraphs. You do this with a <hr />tag. The <hr />
tag is one of those rare “stand alone” tags. Notice there is a space before the slash. 3. Use the <br /> break tag to add an artificial line break. Add a break tag to break up the text in
one of your paragraphs. The break tag is also a stand alone tag. Notice there is a space before the slash. Save the file and then look at it in a browser. Make sure you can see the line break you just added.
4. Add the <strong>word goes here</strong> to one of the words in one of your paragraphs. This tag adds emphasis to chosen words.
5. Finally, add a short list to the bottom of your page. Add your own list items! <ul> Three things I really like: <li>ice cream </li> <li>kittens and puppies</li> <li>art</li> </ul>
6. Remember to save often and keep testing your page in a browser often
Create your own simple web page • Using the template shown earlier, create a web page with
your own information. • Make sure your html file includes the following 11 tags: <html> … </html> <title> … </title> <head> … </head> <body> … </body> <p> …</p> <h1> … </h1> <hr /> <br /> <strong> … </strong> <ul> … </ul> (this tag is a container for a list) <li> … </li> (this tag is for the items in the list)
• Make sure your web page file is saved with the name “index.html”
• Follow the screenshot on the next page –type in the tags you see there, and personalize it with your own information.
• All eleven required tags are shown in this example
References
• http://www.html.net/tutorials/html/lesson4.php