HTML And CSS - Part 1

Discussion in 'Guides' started by astrodomez, Dec 27, 2013.

Sign in to Post
Thread Tools

Thread Tools

  • Thread ID:
HTML And CSS - Part 1
  1. Unread #1 - Dec 27, 2013 at 9:55 PM
  2. astrodomez
    Joined:
    Mar 26, 2013
    Posts:
    122
    Referrals:
    0
    Sythe Gold:
    0

    astrodomez Active Member
    Banned

    HTML And CSS - Part 1
    So in this set of tutorials, we will be learning all about HTML and CSS.
    Before we get into actually coding, I am first going to give some background information.

    So what are HTML and CSS?
    Pretty much, HTML (Hypertext Markup Language) is the core information and base for any website. It creates structure and neatness for your website. CSS (Cascading Stylesheet) on the other hand, takes that information and changes it to your liking.

    HTML go hand and hand together when coding and without them both, making a website would be very difficult.

    1. The Basics (HTML)
    HTML is formatted in a very easy way to understand, especially at a beginner level.
    It is basically made up of Elements and Attributes.

    1.1 Elements

    Code:
    [COLOR="Lime"]<HTML>[/COLOR]
[COLOR="Red"]<p class="information">[/COLOR]
[COLOR="Lime"]</HTML>[/COLOR]
    Green = Element
    Red = Attribute

    An Element always has a starting and an ending tag, and everything between these two tags is part of that element. A starting tag looks like "<html>" and an ending tag has a slash after the first bracket so it looks like "</html>". Lets look at an example:

    Code:
    <HTML>  <----- Starting Tag
[COLOR="Red"]INFORMATION HERE IS ONLY PART OF HTML[/COLOR]
<BODY>  <----- Starting Tag
[COLOR="red"]INFORMATION HERE IS PART OF HTML AND BODY[/COLOR]
</BODY> <----- Ending Tag
[COLOR="red"]INFORMATION HERE IS ONLY PART OF HTML[/COLOR]
</HTML> <----- Ending Tag
    The two elements above are part of the main elements. Main elements are part of every webpage and are highly recommended or necessary. Below is a list of them.
    Code:
    [B]<HTML>[/B]  <---- Tells the browser the page is in HTML
[B]<HEAD>[/B]  <---- Used to put special information. (Linking, CSS, ect)
[B]<TITLE>[/B]  <---- One lined text displayed at top of the page in a tab
[B]<BODY>[/B]  <---- Where all the main pages information is put.
    Now lets see how these look in a webpage setting.

    Code:
    <HTML>
<HEAD>
<TITLE>My Webpage - Home</TITLE>
</HEAD>
<BODY>
<H1>Welcome to my website!</h1>
<BR>
<H2>My name is Adam!</h2>
<BR>
<P>This is a paragraph of information. Feel free to display large amount of text within this element!</P>
</BODY>
</HTML>
    As you can see, I added a few unfamiliar elements into the above coding. Lets go over what each means.

    Code:
    <H1>  <---- Header 1, large header in big text.
<H2>  <---- Header 2, someone large header in medium sized text.
<BR>  <---- Line Break, creates a space in between two items. Does not require an end tag.
<P>  <---- Paragraph, contains bodies of text ranging from many sizes.
    You can also see I added information between each set of tags to show you what it should look like. Now let me add in some more tags to edit our information just a bit more!

    Code:
    <HTML>
<HEAD>
<TITLE>My Webpage - Home</TITLE>
</HEAD>
<BODY>
<H1>Welcome to my website!</h1>
<BR>
<H2>My name is Adam!</h2>
<BR>
<P><B>This is bolded text.</B></P>
<P><U>This is underlined text!</U></P>
<P><B><U>This is bolded and underlined text.</U></B></P>
</BODY>
</HTML>
    I added two different elements. <B> as well as <U>.

    Code:
    <B>  <---- Defines bolded text.
<U>  <---- Defines underlined text.
    These are just two simple text editor elements. I will show more later in the attributes section.


    1.2 HTML Lists And Tables

    The next HTML coding we are going to take a look at is lists. Making a list is actually very easy and does not take much work. Below is an example of what a list looks like in HTML form!

    Code:
    <UL>  <---- Tells that you are starting a new list.
<LI>Item 1</LI>  <---- Each item of the list.
<LI>Item 2</LI>
<LI>Item 3</LI>
<LI>Item 4</LI>
</UL>  <---- Tells that you are ending that same list.
    So what does UL and LI mean exactly?
    Well plain a simply, UL stands for un-ordered list. While LI stands for list item.

    But what if we do not want it to be an "un-ordered list" and we want it to be numbered. In that case, we simple switch out the <UL> and </UL> with <OL> and </OL> standing for "ordered list", giving each item a number, opposed to a simple bullet points. Below is an example.

    Code:
    <OL>  <---- Tells that you are starting a new ordered list.
<LI>Item 1</LI>  <---- Each item of the list.
<LI>Item 2</LI>
<LI>Item 3</LI>
<LI>Item 4</LI>
</OL>  <---- Tells that you are ending that same list.
    So, now that you know how to make a list, we are now going to learn how to make a table or grid. Making a table uses the same format of coding, just in a different way.

    Very simply, a table starts with the table element tag which looks like<TABLE>. After this, we begin with our first row element, which looks like <TR> standing for "table row" then ending with the </TR>. Below, you can see what we have so far.

    Code:
    <TABLE> <---- Start of a new table.
<TR>  <---- Start of a new row.
</TR>  <---- End of the first row.
<TR>  <---- Start of row #2.
</TR>  <---- End of the second row.
<TABLE>  <---- End of the table.
    So we have assigned how many rows we have, but now lets add all of our information, this time in the <TD> element which stands for "table data". Some people look at these as columns instead which is fine.

    Think of a 2X2 Grid... and use it for the displayed coding below.
    FIRST ROW
    Top Left = Item 1
    Top Right = Item 2

    SECOND ROW
    Bottom Left = Item 3
    Bottom Right = Item 4

    Code:
    <TABLE>  <---- Start of a new table.
<TR>  <---- Start of a new row.
<TD>Item 1</TD>  <---- First information (Top Left).
<TD>Item 2</TD>  <---- Second information (Top Right).
</TR>  <---- End of the first row.
<TR>  <---- Start of a new row.
<TD>Item 3</TD>  <---- Third information (Bottom Left).
<TD>Item 4</TD>  <---- Fourth information (Bottom Right).
</TR>  <---- End of the second row.
</TABLE>  <---- End of the table.

    2. Attributes

    Now that we have gone over elements, lets start by showing you what an attribute actually is.

    2.1 Images

    Lets start with a simple element like <IMG>. Now we are going to edit that so it actually displays an image. Now, the element <IMG> doesn't require an end tag so we need to add an attribute inside of the image tag to make it display an image.

    The attribute which we are going to use is "src" which stands for source.

    <IMG src>

    Now that we have added src inside of the tag, we now need to define the image link. For example, the link will be called (www.example.com/image.jpg).

    Code:
    <IMG src="www.example.com/image.jpg">
    As you can see, I added an "=" and two (") which between I added the image source. This coding will work find when displaying an image. But what if the image was 100PX Wide and 80PX in Height but instead we wanted it to be 50PX Wide and 40PX in Height.

    So lets add the "width" and "height" attributes to the same element. Shown below...

    Code:
    <IMG src="www.example.com/image.jpg" width="50px" height="40px">
    As you can see, it follows the same rules as the first attribute. We have now made that image smaller.

    2.2 Links

    Now lets put ourselves in a different scenario and say we want to link someone to a different page. Simply putting the link (http://example.com/) in a paragraph would just make it show up as text and not be clickable.

    HTML linking is defined using the <A> element around a link, then making it clickable. But what if we want it to say "click me". Well, lets take a look.

    Below is what the opening tag would look like.

    Code:
    <a href="http://example.com/">
    As you can see, we still define the "a" in the tag but we also add the attribute "href". For this attribute, we simply put the link in which we want the destination to be when it is clicked on. Now lets add the end tag.

    Code:
    <a href="http://example.com/"></a>
    Now to make it say "Click Me", we simple define the wished upon text between the two "link" tags.

    Code:
    <a href="http://example.com/">Click Me</a>
    So this would now display a link saying "click me".

    Now, there are other attributes out there, but I am going to go over those within the next tutorial because they relate to CSS.

    Thanks for reading.
     
    Share
  3. Unread #2 - Dec 27, 2013 at 10:07 PM
  4. MineMarkPT
    Joined:
    Jun 19, 2012
    Posts:
    477
    Referrals:
    0
    Sythe Gold:
    0

    MineMarkPT Forum Addict
    Banned

    HTML And CSS - Part 1
    Code:
     <B> / <I>
    Should be replaced by:

    Code:
     <strong> / <em>
    ay
    As of HMTL5, because strong and em define important text that the user will find usefull. Now you may be thinking, but I can make that with B and I, whats the diference?
    Well the diference is the strong and em call to the browser to define the way it wants to set text as important. Imagine one day the way important text is emphasized on the internet is not by bold or italic, but by underlined and pink. This means you would have to rewrite all the code in your page in order to keep up with the new trends. Using the strong and em, it would automatically update to the browsers default of "important text".

    Also its a good practice to use the attribute alt="Description of the Picture" in IMG elements, in case the picture is failed to load.

    Good post, keep on working.

    Mark.
     
    Share
  5. Unread #3 - Dec 27, 2013 at 11:11 PM
  6. astrodomez
    Joined:
    Mar 26, 2013
    Posts:
    122
    Referrals:
    0
    Sythe Gold:
    0

    astrodomez Active Member
    Banned

    HTML And CSS - Part 1
    It is an older tutorial that I typed and forgot to change some of the new updates.
     
    Share
  7. Unread #4 - Jan 30, 2014 at 10:51 PM
  8. rsbloodhoun
    Joined:
    Jan 29, 2014
    Posts:
    44
    Referrals:
    0
    Sythe Gold:
    0

    rsbloodhoun Member
    Banned

    HTML And CSS - Part 1
    nice post
     
    Share
  9. Unread #5 - Jun 9, 2014 at 7:15 PM
  10. RocketPower
    Joined:
    May 18, 2013
    Posts:
    843
    Referrals:
    0
    Sythe Gold:
    0

    RocketPower WARROCKPS.COM
    Banned

    HTML And CSS - Part 1
    very helpfull thank you!
     
    Share
  11. Unread #6 - Aug 8, 2016 at 12:23 PM
  12. Subsonic GFX
    Joined:
    Feb 6, 2011
    Posts:
    520
    Referrals:
    0
    Sythe Gold:
    140

    Subsonic GFX Forum Addict
    Banned

    HTML And CSS - Part 1
    Very helpful guide, thanks
     
    Share
< How to get your Sythe referral link | Get Rid of ALL Ads In Skype! >

Users viewing this thread
1 guest


 
 
Adblock breaks this site