My Community

Tutorial 3 Anchor Tags, Breaking Points, plus D&D Div Tags and <dd> Bracket

ChrisRansom

  • *********
  • 469
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Today I will discuss anchor tags for linking other webpages and other websites.  I will also talk about a breaking point which is like an enter key and how to code.  Other topics I will discuss are the <div align="  "></div> bracket which aligns your code to the left, center, or right kind of how you align the letters in a word document to the left, center, or right.  Then you have the <dd> bracket.  This is like a paragraph except it begins with the tab in html code and looks more professional when writing a piece on your webpage.

Creating an anchor tag is similar to creating an image.  There are three types of images gif, jpg, and png.

Our original logo <img src="draftutopia.jpg" />

Second logo <img src="draftutopia.gif" />

Current logo <img src="draftutopia.png" />

You have to remember the image name and type of image file and type that in the quotes of the image search.
« Last Edit: September 01, 2014, 03:25:04 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

  • *********
  • 469
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 3 Anchor Tags, Breaking Points, plus D&D Div Tags and <dd> Bracket
« Reply #1 on: September 01, 2014, 03:07:56 PM »
An anchor tag works like this it is a link to a site similar to an <img src"  " />.  Now I will add an anchor tag to the webpage I made in CSS.

Remember the first webpage I showed you how to create in html?  I saved this page as manziel.html.  We will copy this link to make a new webpage called about.html with the exact same content as our home page manziel.html

<html>
<head>

<link rel="stylesheet" type="text/css" href="mud.css">

</head>
<body>

<h1>Johnny Football&#146;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>

We saved it as manziel.html open it and see what happens.

If you did everything correctly the words in the header 1 bracket and paragraph bracket should be centered.  I bolded the words in the header 1 and the paragraph to let the reader know which words should be centered if you apply this concept.

If you make a paragraph in css that says

p {text-align: center;} that means the words in the paragraph like Johnny Football's bar and grill will be centered.  Does that make sense?

Try making your own css page simply using the h1 {  }  p   {       }

The next tutorial will be about modifying link colors that you make with anchor tags in css.  Until then so long.
« Last Edit: September 01, 2014, 03:25:52 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

  • *********
  • 469
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 3 Anchor Tags, Breaking Points, plus D&D Div Tags and <dd> Bracket
« Reply #2 on: September 01, 2014, 03:14:12 PM »
An anchor tag works like this it is a link to a site similar to an <img src"  " />.  Now I will add an anchor tag to the webpage I made in CSS.

Remember the first webpage I showed you how to create in html?  I saved this page as manziel.html.  We will copy this link to make a new webpage called about.html with the exact same content as our home page manziel.html

<html>
<head>

<link rel="stylesheet" type="text/css" href="mud.css">

</head>
<body>

<h1>Johnny Football&#146;s Bar and Grill</h1>

<h2>Johnny Manziel</h2>

<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>

<a href="manziel.html">Home[/url][/u]
<a href="about.html">About[/url][/u]

</body>
</html>

I bolded and underlined the anchor tag because bolding just the centered paragraphs I made with CSS can be confusing.  Look for the words in this html code that are bolded and underlined.  That is how you create a different webpage by linking it to your webpage.  If you copied and saved the exact code to a separate document the link should load. 

If you open up about.txt in Microsoft or your about.html page on a web server you can edit the page by changing the title from Johnny Football's Bar and Grill to About.  The words about will show up in the center because the h1 {text-align:center} feature from your mud.css webpage is applied to your html webpage.
« Last Edit: September 03, 2014, 11:19:08 AM 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

  • *********
  • 469
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 3 Anchor Tags, Breaking Points, plus D&D Div Tags and <dd> Bracket
« Reply #3 on: September 01, 2014, 03:20:12 PM »
Now we will add breaking lines like this
.  If you want your links across from each other do not worry about this breaking line.  If you want your links down from each other vertically, you may need to add one
 or
 breaking point.  Typing
 is like typing an enter key in html code.

<html>
<head>

<link rel="stylesheet" type="text/css" href="mud.css">

</head>
<body>


<h1>About</h1>



<h2>Johnny Manziel</h2>



<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>

<a href="manziel.html">Home[/url][/u]
<a href="about.html">About[/url][/u]

</body>
</html>

Now save this page as about.html and reload it.  You should see a difference between the home page and the about page.  The about page will have breaking points while the home page will not.  Maybe it is different with headers.  I know with paragraphs or without paragraphs you need the breaking point.  Remember
 equals enter in html code and you should be good.
« Last Edit: September 01, 2014, 03:53:22 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

  • *********
  • 469
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 3 Anchor Tags, Breaking Points, plus D&D Div Tags and <dd> Bracket
« Reply #4 on: September 01, 2014, 03:34:07 PM »
Now we will use the <div align="  "></div> to move text to the left, center, or right.

<html>
<head>

<link rel="stylesheet" type="text/css" href="mud.css">

</head>
<body>


<h1>About</h1>



<div align="center"><h2>Johnny Manziel</h2></div>



<div align="left"><h3>First freshman to win Heisman.</h3></div>



<div align="right"><h4>moneyfingers</h4></div>



<div align="center"><h5>Cleveland Browns</h5></div>



<div align="right"><h6>bitch please</h6></div>



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

<a href="manziel.html">Home[/url][/u]
<a href="about.html">About[/url][/u]

</body>
</html>

Now save this page as about.html and reload it.  Header 1 was centered thanks to the h1 {text-align:center} code I entered in mud.css.  Now header 2 and header 5 should be centered.  Header 3 should remain on the left with headers 4 and 6 both appearing on the right side.  Most websites keep the text on the left or the center and rarely use the right side when aligning text.  Knowing the div align bracket in html allows you to move things over to the left, center, or right side.
« Last Edit: September 01, 2014, 03:53:52 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

  • *********
  • 469
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 3 Anchor Tags, Breaking Points, plus D&D Div Tags and <dd> Bracket
« Reply #5 on: September 01, 2014, 03:41:28 PM »
Finally we have the <dd></dd> Bracket this allows us to make a paragraph with a tag in html.  It is different from your standard <p></p> bracket where you type words inside the html bracket to create a paragraph.

We will copy this about page into another web page using notepad or text wrangler and save this webpage as location.html.  We will go back to

<html>
<head>

<link rel="stylesheet" type="text/css" href="mud.css">

</head>
<body>


<h1>About</h1>



<div align="center"><h2>Johnny Manziel</h2></div>



<div align="left"><h3>First freshman to win Heisman.</h3></div>



<div align="right"><h4>moneyfingers</h4></div>



<div align="center"><h5>Cleveland Browns</h5></div>



<div align="right"><h6>bitch please</h6></div>



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

<a href="manziel.html">Home[/url][/u]
<a href="about.html">About[/url][/u]
<a href="location.html">Location[/url][/u]

</body>
</html>

Notice I added a location.html anchor tag.  This must be applied to your manziel.html and about.html webpages for the website to be congruent.  I'll show you how the <dd></dd> bracket works in the location.html webpage.

« Last Edit: September 01, 2014, 03:54:20 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

  • *********
  • 469
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 3 Anchor Tags, Breaking Points, plus D&D Div Tags and <dd> Bracket
« Reply #6 on: September 01, 2014, 03:52:30 PM »
This is our Location.html webpage

<html>
<head>

<link rel="stylesheet" type="text/css" href="mud.css">

</head>
<body>


<h1>Location</h1>




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

<dd>Johnny Football&#146;s Bar and Grill was founded by Jerry Jones.  The same moron that runs the Dallas Cowboys.  The dumb ape that spent nearly a trillion dollars building a scoreboard rivaling the Great Wall of China.  That guy bought an Outback Steakhouse and renamed it Johnny Football&#146;s Bar and Grill.</dd>




<a href="manziel.html">Home[/url][/u]
<a href="about.html">About[/url][/u]
<a href="location.html">Location[/url][/u]
</body>
</html>

Now save this page as location.html and reload it.  You should see a new webpage with a paragraph bracket with the words in the paragraph centered due to the p {text-align:center} tag.  Your <dd> bracket will show a paragraph with a tab.  The paragraph bracket just shows text on the left side without a tab.  That is the difference between the <dd> bracket and the <p> bracket.  Also when using the <dd></dd> use two breaking points before the end of the paragraph like this

 and press the enter key once before starting a new <dd></dd>

 then press enter again. 

Getting used to this pattern will make your webpage that you publish look like a word document with tabs.  That will stand out and people will realize that your website is extremely professional with grammar.
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 469
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 3 Anchor Tags, Breaking Points, plus D&D Div Tags and <dd> Bracket
« Reply #7 on: September 01, 2014, 04:21:00 PM »
I hope you enjoyed these tutorials.  When saving a webpage you can save it as anything as long as there is .html, .css, or .js code to designing a website.

<a href="home.html">Home[/url]

You have to use the <style type="about.css"></style> bracket to code css or a script tag <script type="about.js"></script> in html.  If you do this you must type your exact css or javascript code in html so the code functions.   

You can also use link rel stylesheet code to link a webpage made in css or javascript.

<link rel="stylesheet" type="text.css" href="about.css" />
<link rel="script" type="text.js" href="about.js" />


 is like typing enter.  Div align lets you align your words in html.  The <dd> bracket is like a paragraph with a tab at the beginning.

There will be a total of 10 tutorials in HTML.  I covered the first three to help you get started and the next 7 will take place sometime next offseason after the NFL season.

Tutorial 4 Changing Font Colors and Creating Table Charts This will teach you how to change the color of your table charts, create a table chart, and create a table chart by changing the background color of a table chart.  You can use this to create a navigation bar if you really wanted to.

Tutorial 5 Background Image.  In this tutorial I will teach you how to use a background image as the background for a webpage in html.

Tutorial 6 I will reveal the background for my Draft Utopia homepage and show you how you can create a webpage using css and copying it to an html webpage.

Tutorial 7 How to create a slideshow in HTML code.  Tutorial 7 teaches you how to use html, css, and javascript to create a webpage.

Tutorial 8 Uploading videos to your webpage.  This tutorial teaches you how to upload a youtube video to your webpage with an I frame link in HTML.

Tutorial 9 Web Marketing This will teach you how to use meta name, advertising, social media buttons, and how to upload code from your own personal facebook page on to your website.  We'll also go over how to put a search bar on your webpage.  I will also design a registration form in html as a warm up to the final assignment.

Tutorial 10 Designing The Dunbar Project Website In HTML.  This lesson is difficult it requires you to design a website in html and then you have to modify the webpage.  The final lesson requires you to take everything you applied and make a webpage called the Dunbar project using the code from the Sams Teach Yourself Web Publishing with HTML and CSS book by Lauren Lemay and  Rafe Coburn.  Just go to Lesson 13 on page 389 if you have this book and you can do the lesson yourself.  Otherwise I will copy the code from the book, and we can work on this webpage together.  This website will require you to type in 10 webpages in html.  The home page with code in html will be done for you.  It will be up to you to rename the html files under the same file name with code in html.  You can use those remaining 10 pages besides the home page to post whatever content you want by applying everything you learn about HTML in the 10 tutorials I plan on creating.

Hope you enjoyed lessons 1-3 for publishing web pages in HTML.  Lessons 4-10 will occur sometime in 2015 after the NFL season.
« Last Edit: September 24, 2014, 01:49:19 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.