My Community

Tutorial 2 Images and Lists

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Tutorial 2 Images and Lists
« on: August 25, 2014, 01:20:33 PM »
There are three different types of images and two different types of lists.

Image types

GIF

JPG

PNG

Different Lists

Ordered Lists
Unordered Lists


Let's say I want an image of Sam Bradford.  I go find an image and type in.

<img src="sambradford.png" /> in code.

If you have the image on your desktop along with the webpage you saved the image will show up.  If you upload the webpage and image to a Linux server via Go Daddy both the image and the code you wrote show up.

Try thinking of images for your site.  Look for an image on the web and rename the image as a .jpg, .gif, or .png file.  Then upload that image to your website with your code. 

Using the same image filename of the photo from another search engine without changing the file name in code is considered copyright infringement.  Some will want you to source the photo and others will want you to take a photo down entirely.  If this happens just cooperate and find a new photo to upload. 
« Last Edit: August 25, 2014, 01:22:53 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 2 Images and Lists
« Reply #1 on: August 25, 2014, 01:21:37 PM »
Ordered Lists
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ol>

This is a basic example of an ordered list.
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 2 Images and Lists
« Reply #2 on: August 25, 2014, 01:25:11 PM »
Unordered Lists

<ul>
<li>Bullet 1</li>
<li>Bullet 2</li>
<li>Bullet 3</li>
</ul>

When you use an unordered list you will often see a bullets show up on a webpage similar to bullets that you see in a Microsoft Powerpoint presentation.  Knowing this and applying this is a great way to qualify your product and give readers a reason to visit your homepage by mentioning what your site is about on the home page or about page.
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 2 Images and Lists
« Reply #3 on: August 25, 2014, 01:37:27 PM »
Applying Concepts From Ordered Lists

There are two more cool things you can do with ordered lists.  First you can use an ordered list with images to convey which players get picked in a mock draft like I do with an NFL Mock Draft.  The second thing is something called an ordered list start where the ordered list starts at a specific number you want the ordered list to start at.

Now I'll demonstrate examples of how to do this using ordered list code from Draft Utopia.

Example 1 Using Ordered List With An NFL Mock Draft.

<ol>
<li><img src="stlouisrams.gif" />
St. Louis Rams: Jameis Winston, QB, Florida State <img src="floridastateseminoles.gif" />

<dd>Blah Blah Blah.  Bradford is injured.  Winston may be a food stealer.  Regardless Rams take him first overall.</dd>



<!--</li>-->

Using this code allows you to emphasize your point when making an NFL Mock Draft.  Now you can make your own mock drafts with code.  Just make sure to get different images from ours.  If you use the same image, just name it under a different file name like a .jpg or .png document instead of a .gif photo.  Most of our team logos are saved as gif files.

Let's stay I want to start my ordered list at 4.  I can just type in <ol start=4> and it starts the ordered list at 4 instead of one.  It is that easy.  Can you use multiple ordered lists.  Yes you can.  I did this yesterday when designing my New Jersey Devils Season Preview when comparing defensemen drafted in the top 20 overall from the 2011 NHL Draft.

<ol start=4>
<li><img src="newjerseydevils.gif" />
New Jersey Devils: Adam Larsson, D, Skelleftea AIK (Elitserien) <img src="skelleftteaaik.gif" />




<p>Currently a #6 defenseman on line 3 with the New Jersey Devils.</p>



<!--</li>-->
</ol>

<ol start=9>
<li><img src="bostonbruins.gif" />
Boston Bruins: Dougie Hamilton, D, Niagara IceDogs (OHL) <img src="niagaraicedogs.gif" />




<p>Currently a #3 defenseman on line 2 with the Boston Bruins.  Has experience on line 1 next to Zdeno Chara when Boychuk was out.  Hamilton looks like the #1 defenseman of the future when Chara leaves.</p>



<!--</li>-->

<li><img src="minnesotawild.gif" />
Minnesota Wild: Jonas Brodin, D, Farjestads BK (Elitserien) <img src="farjestadsbk.gif" />




<p>Currently a #2 defenseman on line 1 with the Minnesota Wild.  Playing next to Ryan Suter gives Brodin confidence and makes the Minnesota Wild line 1 defense one of the better line 1 defenses in the NHL.</p>



<!--</li>-->

<li><img src="coloradoavalanche.gif" />
Colorado Avalanche: Duncan Siemens, D, Saskatoon Blades (WHL) <img src="saskatoonblades.gif" />




<p>Currently a #1 defenseman on line 1 with the Lake Erie Monsters In The AHL.  Colorado needs a #6 defenseman in the NHL.  Siemens may get called up in 2015.</p>



<!--</li>-->

<li><img src="carolinahurricanes.gif" />
Carolina Hurricanes: Ryan Murphy, D, Kitchener Rangers (OHL) <img src="kitchenerrangers.gif" />




<p>Currently a #4 defenseman on line 2 with the Carolina Hurricanes.  Carolina&#146;s top defenseman will be a free agent in 2015.  Murphy has a chance to become the top defenseman on the roster with a breakout season in 2014.</p>



<!--</li>-->
</ol>

<ol start=14>
<li><img src="dallasstars.gif" />
Dallas Stars: Jamie Oleksiak, D, Northeastern Huskies (NCAA) <img src="northeasternhuskies.gif" />




<p>Currently a #2 defenseman on line 1 with the Calder Cup Champion Texas Stars in the AHL.</p>



<!--</li>-->
</ol>


<ol start=17>
<li><img src="montrealcanadiens.gif" />
Montreal Canadiens: Nathan Beaulieu, D, Saint John Sea Dogs (QMJHL) <img src="saintjohnseadogs.gif" />




<p>Currently a #6 defenseman on line 3 with the Montreal Canadiens.</p>



<!--</li>-->
</ol>


<ol start=19>
<li><img src="edmontonoilers.gif" />
Edmonton Oilers: Oscar Klefbom, D, Farjestads BK (Elitserien) <img src="farjestadsbk.gif" />




<p>Currently the #1 defenseman on line 1 with the Oklahoma City Barons in the OHL.</p>



<!--</li>-->

<li><img src="arizonacoyotes.gif" />
Arizona Coyotes: Connor Murphy, D, United States National Team Development Program (USHL) <img src="usntdp.gif" />




<p>Currently a #6 defenseman on line 3 with the Arizona Coyotes.  Murphy played 30 games.  Ten on line 1, ten on line 2, and 10 on line 3 with the Phoenix Coyotes in 2013.</p>



<!--</li>-->
</ol>

Using this code I can illustrate which exact spots a player was drafted in that respective draft class.  You can apply that to coding a draft grades webpage using the exact numbers that the team uses when drafting a prospect.

Go ahead and try to apply these additional techniques.
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 2 Images and Lists
« Reply #4 on: August 25, 2014, 01:42:56 PM »
Quick Review of everything that I covered today with images and lists in html.

You have different image files like .gif, .jpg, and .png files.

You have an ordered list or underordered list.  Ordered list is <ol> and undordered list is <ul>

You have a draft pick in your mock draft like this.  This indicates the Rams are drafting Winston with the top pick in the 2015 NFL Draft.

<ol>
<li><img src="stlouisrams.gif" />
St. Louis Rams: Jameis Winston, QB, Florida State <img src="floridastateseminoles.gif" />

<dd>Blah Blah Blah.  Bradford is injured.  Winston may be a food stealer.  Regardless Rams take him first overall.</dd>



<!--</li>-->
</ol>

Finally you have the <ol start=> bracket if you believe Johnny Manziel is the 22nd best player and you want to make him that instead of the 4th best overall player when making a quarterback rankings webpage you can simply apply the <ol start=22> concept and then close the bracket with a </ol> closing bracket.

Hope that recap helps in case the first few posts were too much to read.  Next tutorial I'll do my best to describe anchor tags.  Anchor tags allow you to link different webpages on one webpage.  This is key to coding a website and paramount to building webpages on a web server.  Not sure if I will do it on September 1st.  Lots of sports coming up next month.

« Last Edit: August 25, 2014, 03:13: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.