My Community

Tutorial 1 Basics To Desiging A Web Page

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Tutorial 1 Basics To Desiging A Web Page
« on: August 18, 2014, 07:58:33 AM »
This tutorial will focus strictly on fundamentals of building a web page.

Most webpages in html are constructed like this

<html>
<head>

</head>
<body>


</body>
</html>
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 1 Basics To Desiging A Web Page
« Reply #1 on: August 18, 2014, 08:00:09 AM »
You can make these webpages more effective by adding header tags and paragraph tags.  There are six different types of header brackets and one type of paragraph bracket for designing web pages in html.

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>

<h6></h6>

<p></p>
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 1 Basics To Desiging A Web Page
« Reply #2 on: August 18, 2014, 08:04:43 AM »
Here is a basic webpage with just HTML headers and paragraphs that I created.  One more thing.  Every good webpage needs a title and a meta name so it can show up in Google's search engine.  For now we will just worry about the title since you're just getting started.

<html>
<head>
<title>Manziel</title>
</head>
<body>

<h1>Johnny Football's Bar and Grill</h1>

<h2>Johnny Manziel</h3>

<h3>First freshman to win Heisman.</h3>

<h4>moneyfingers</h4>

<h5>Cleveland Browns</h5>

<h6>bitch please</h6>

<p>Johnny Football&#146;s Bar and Grill is located in Arlington, TX.  For more information call Jerry Jones personal hotline.</p>
</body>
</html>

Save this as manziel.html.
« Last Edit: August 27, 2014, 01:27:50 PM by ChrisRansom »
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 1 Basics To Desiging A Web Page
« Reply #3 on: August 18, 2014, 08:14:09 AM »
Try saving the code I just typed to an html document in Notepad, Notepad++, Text Edit, or Text Wranger.

You may need to type an apostrophe symbol &#146; for the apostrophe in Johnny Football's Bar and Grill To Show up in html.

Save the document as manziel.html in your desktop.

Now try to create your own webpage in html by applying these principles.  Start off with an <html> opening bracket followed by a header. <head>Think of  catchy title to put in the <title>This is a title</title>.  The title always goes in the head of your HTML. 

<html>
<head><title>a</title>
</head>

That is our head for now.  If it has something to do with the site's logistics, css, or java it probably goes in the head.  If it has something to do with images, paragraph structure, or a story you want to create on your webpage it probably goes in the body.

Type any of the header tags or paragraph tags in the body section of your html.

<body>

<h1>This is the most common header</h1>

<h3>Hello World</h3>

<h6>This header is too damn small</h6>

<p>P is for parasite.</p>

All you need to remember are the brackets.  Everything else can be positioned inside the brackets.
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 1 Basics To Desiging A Web Page
« Reply #4 on: August 18, 2014, 08:16:46 AM »
Here is a basic webpage with just HTML headers and paragraphs that I created.  One more thing.  Every good webpage needs a title and a meta name so it can show up in Google's search engine.  For now we will just worry about the title since you're just getting started.

<html>
<head>
<title>Manziel</title>
</head>
<body>

<h1>Johnny Football's Bar and Grill</h1>

<h2>Johnny Manziel</h3>

<h3>First freshman to win Heisman.</h3>

<h4>moneyfingers</h4>

<h5>Cleveland Browns</h5>

<h6>bitch please</h6>

<p>Johnny Football&#146;s Bar and Grill is located in Arlington, TX.  For more information call Jerry Jones personal hotline.</p>
</body>
</html>

That's a recap on how to create a quick webpage with headers and paragraphs.  Next Monday I'll discuss two different types of lists you can make and how to code each one.  CSS and JavaScript tutorials take place on Wednesday and Friday.
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

Re: Tutorial 1 Basics To Desiging A Web Page
« Reply #5 on: August 20, 2014, 04:45:52 AM »
Stuff I already knew but reading and doing make everything easier to learn. Great job and I look forward to the next installment. Before you can learn the rest of the Web Coding you have to learn HTML5. Thanks a bunch.