Web Page Basics 1 – Starter Page

Over the last few weeks we have been learning about the basic building blocks for Web pages using HTML and CSS to create our own pages. This series of Blog posts will review the concepts implemented so far.

Create a basic HTML page in a text editor; save the file with an .html extension.

  • Start with the document type declaration !DOCTYPE html; this tells the Browser what type of content to expect
  • The Web page is an HTML document and is structured using paired (opening and closing) HTML tags; tag names are enclosed in “angle” brackets; closing tag starts with </
  • Begin structuring the page by adding HTML starting and closing tags: <html></html>
  • Add the <head></head> tags just below the starting <html> tag; head content is not displayed, but contains information about the page, including title, links, styles, and “meta” tags used for Search Engine Optimization (SEO)
  • Add the <title></title tags inside the <head>; type your page’s title between the tags. The title will display on the tab in the Browser when you view the page.
  • Add the <body></body> tags below closing </head> tag . The only content that will be visible on your page is the content that you create inside the body.
  • Add some content in the body: a simple thing to add is a heading using the <h1></h1> tag pair and/or a paragraph using the <p></p> tags
  • Save the .html file;  view it in your Browser. Your document should look something like this:

<!DOCTYPE html>

<html>

<head>

  <title>My Web Page</title>

</head>

<body>

    <h1>Hello World!</h1>

    <p>Come back later for much more interesting content!</p>

</body>

</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s