converse it

A forums community that covers it all. Discuss in our wide range of categories. Play games, IM chat w/ friends, customize your profile and post updates to your wall. Stay connected.

No special offers at this time.
Welcome to converse it Guest. Please enjoy your stay.
Need help using our site? Click here!
Are you new here? Don't forget to introduce yourself don't be shy. You can introduce yourself by creating a new topic in the introduce yourself section of our forums
Bored? Visit our Arcade. We got tons of games that you can play while chatting with your friends.
Do you like converse it? Tell your friends! For every friend your bring you get 50 Ci Tokens.
Have an instagram? want to share your pictures with converseit Put #converseit in your tag and it will be added to the portal page.
Learn more about your personal wall here.

You are not connected. Please login or register

CSS (Cascading Style Sheets) and HTML (Hypertext markup language) Tutorial

 



  • View previous topic View next topic Go down Message [Page 1 of 1]

    CSS is one of the easiest coding languages there is. CSS stand for Cascading Style Sheets and is used for styling your website. Today I will be showing you an easy step by step tutorial. Now first lets set up an html document in our text editors.

    If you need a text editor I have some recommendations. These text editors are free and are very good.

    PC(notpad++)- http://notepad-plus-plus.org/download/v6.5.html

    Mac(Text wrangler)- http://www.barebones.com/products/textwrangler/download.html

    First we will need to create a basic html page.

    Step 1: Open a new document in your text editor (if needed set the code to html)

    Step 2: Make an html page with a head, body, footer, etc. Like so..

    Code:

    <!DOCTYPE html>
    <head>
    <title> This is the title of your website. </title>
    </head>
    <body>
    <p> Hello, This is your first paragraph where you can write things and whatever. </p>
    </body>
    <footer>
    </footer>
    </html>
    The title just displays in the website tab and gives your page a name.

    Step 3: We are going to make our first section. We are going to give our section an id so we can style it differently from our other sections.

    Code:
    <!DOCTYPE html>
    <head>
    <title> This is the title of your website </title>
    </head>
    <body>
    <section id="line1">
    <p> Hello, This is your first paragraph where you can write things and whatever. </p>
    </section>
    </body>
    <footer>
    </footer>
    </html>
    Ok now you created your first section located in your body and you assigned this section an id which is line1

    Now that we added one section let's add a few more.

    Code:

    <!DOCTYPE html>
    <head>
    <title> This is the title of your website </title>
    </head>
    <body>
    <section id="line1">
    <p> Hello, This is your first paragraph where you can write things and whatever. </p>
    </section>
    <section id="line2">
    <p>This is your second paragraph lets fill it with malarchy! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet iaculis ligula et venenatis. Etiam viverra turpis felis, non cursus neque ornare quis. Pellentesque at pulvinar erat. Suspendisse odio orci, dictum eu faucibus quis, congue vel neque. Nulla porta dui semper ipsum sagittis, viverra rhoncus nisl lacinia. Maecenas rutrum ultrices quam, eget pulvinar felis ultricies ac. Vivamus rhoncus et sem non posuere. Suspendisse et sem nec urna suscipit hendrerit et ut velit. Vestibulum sapien mi, malesuada vitae posuere ut, blandit eu tortor.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce rutrum vel velit non pharetra. Vestibulum non libero a sem rhoncus aliquam quis nec sapien. Aenean pharetra, diam at molestie dictum, risus mauris faucibus enim, non cursus mi velit ac diam. Donec rhoncus diam in libero dapibus, vel tempus nunc ornare. Curabitur in bibendum leo, sed luctus lacus. Curabitur aliquam eleifend elementum. In et tincidunt nulla. Aenean sit amet mi mollis, interdum odio vel, molestie mi. Curabitur dictum egestas justo ac gravida. Phasellus cursus elementum magna, eu pharetra turpis fermentum id. Mauris non lorem bibendum enim molestie fringilla. Praesent posuere, ligula aliquet varius suscipit, massa mauris vulputate justo, eu feugiat neque nulla id urna. Suspendisse porttitor malesuada lectus, a commodo turpis pharetra a. Aliquam in nulla sed sapien elementum posuere.</p>
    </section>
    <div id="trollface">
    <img src="http://s11.postimg.org/kjeu8oeab/you_mad_bro.png" alt="troll face">
    </div>
    </body>
    <footer>
    </footer>
    </html>
    Okay so you may have noticed I have added in some dummy text which I got from http://www.lipsum.com/ just to fill in some space. Also I added an image into the webpage.

    Div tags are just a general tag that can hold just about anything in it.
    Code:
    <div></div>
    are usually used in places where no specific tag such as section tags, article tags, header tags, etc. are used. All the section, header, and article tags do are identify a specific element of the page.

    Step 4: Now that we have our basic content we can now work on styling.

    First save your file as index.html

    Then open up a new document and name this document stylesheet.css

    Move both files into a folder named "site"





    Go to your index.html page and we are going to add in our css stylesheet.

    Code:
    <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen" />
    This tells us that we are importing a stylesheet and it is basic text or css. Then we identified our css file as the href because we want it to load our stylesheet.

    Add this to your head area like so..

    Code:

    <!DOCTYPE html>
    <head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen" />
    <title> This is the title of your website </title>
    </head>
    <body>
    <section id="line1">
    <p> Hello, This is your first paragraph where you can write things and whatever. </p>
    </section>
    <section id="line2">
    <p>This is your second paragraph lets fill it with malarchy! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet iaculis ligula et venenatis. Etiam viverra turpis felis, non cursus neque ornare quis. Pellentesque at pulvinar erat. Suspendisse odio orci, dictum eu faucibus quis, congue vel neque. Nulla porta dui semper ipsum sagittis, viverra rhoncus nisl lacinia. Maecenas rutrum ultrices quam, eget pulvinar felis ultricies ac. Vivamus rhoncus et sem non posuere. Suspendisse et sem nec urna suscipit hendrerit et ut velit. Vestibulum sapien mi, malesuada vitae posuere ut, blandit eu tortor.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce rutrum vel velit non pharetra. Vestibulum non libero a sem rhoncus aliquam quis nec sapien. Aenean pharetra, diam at molestie dictum, risus mauris faucibus enim, non cursus mi velit ac diam. Donec rhoncus diam in libero dapibus, vel tempus nunc ornare. Curabitur in bibendum leo, sed luctus lacus. Curabitur aliquam eleifend elementum. In et tincidunt nulla. Aenean sit amet mi mollis, interdum odio vel, molestie mi. Curabitur dictum egestas justo ac gravida. Phasellus cursus elementum magna, eu pharetra turpis fermentum id. Mauris non lorem bibendum enim molestie fringilla. Praesent posuere, ligula aliquet varius suscipit, massa mauris vulputate justo, eu feugiat neque nulla id urna. Suspendisse porttitor malesuada lectus, a commodo turpis pharetra a. Aliquam in nulla sed sapien elementum posuere.</p>
    </section>
    <div id="trollface">
    <img src="http://s11.postimg.org/kjeu8oeab/you_mad_bro.png" alt="troll face">
    </div>
    </body>
    <footer>
    </footer>
    </html>
    Don't foget to save! [tip]You will need to save for the changes to take affect.[/tip]

    Now go to your stylesheet.css and we are going to change the background to black and make the font white.

    Code:
    body {background: black;}

    p {
       font: verdana;
       color: white;
       }
    After typing your code hit save and if you view your index.html file in a browser [tip]View files in a browser by right clicking them and opening in a browser such as chrome.[/tip]. You should see the background is black and your paragraph font is verdana and white.

    Now we are going to add a 2px white solid border around our image.

    Code:
    body {background: black;}

    p {
       font: verdana;
       color: white;
       }
       
    #trollface {
       border: solid white 2px;
       }
    We identified the image as #trollface because it sub element because we gave it an id. Since we gave the image the id of "trollface" we would need it to be recognized as a sub element in order to find it.

    let's go back to our index.html page and add a heading above the first paragraph.

    Code:
    <h1>This is your heading</h1>
    put your header first in your body tag.

    Code:
    <!DOCTYPE html>
    <head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen" />
    <title> This is the title of your website </title>
    </head>
    <body>
    <h1>This is your heading</h1>
    <section id="line1">
    <p> Hello, This is your first paragraph where you can write things and whatever. </p>
    </section>
    <section id="line2">
    <p>This is your second paragraph lets fill it with malarchy! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet iaculis ligula et venenatis. Etiam viverra turpis felis, non cursus neque ornare quis. Pellentesque at pulvinar erat. Suspendisse odio orci, dictum eu faucibus quis, congue vel neque. Nulla porta dui semper ipsum sagittis, viverra rhoncus nisl lacinia. Maecenas rutrum ultrices quam, eget pulvinar felis ultricies ac. Vivamus rhoncus et sem non posuere. Suspendisse et sem nec urna suscipit hendrerit et ut velit. Vestibulum sapien mi, malesuada vitae posuere ut, blandit eu tortor.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce rutrum vel velit non pharetra. Vestibulum non libero a sem rhoncus aliquam quis nec sapien. Aenean pharetra, diam at molestie dictum, risus mauris faucibus enim, non cursus mi velit ac diam. Donec rhoncus diam in libero dapibus, vel tempus nunc ornare. Curabitur in bibendum leo, sed luctus lacus. Curabitur aliquam eleifend elementum. In et tincidunt nulla. Aenean sit amet mi mollis, interdum odio vel, molestie mi. Curabitur dictum egestas justo ac gravida. Phasellus cursus elementum magna, eu pharetra turpis fermentum id. Mauris non lorem bibendum enim molestie fringilla. Praesent posuere, ligula aliquet varius suscipit, massa mauris vulputate justo, eu feugiat neque nulla id urna. Suspendisse porttitor malesuada lectus, a commodo turpis pharetra a. Aliquam in nulla sed sapien elementum posuere.</p>
    </section>
    <div id="trollface">
    <img src="http://s11.postimg.org/kjeu8oeab/you_mad_bro.png" alt="troll face">
    </div>
    </body>
    <footer>
    </footer>
    </html>
    Let's add another image at the beginning of paragraph 1.

    Like soo...

    Code:

    <!DOCTYPE html>
    <head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen" />
    <title> This is the title of your website </title>
    </head>
    <body>
    <h1>This is your heading</h1>
    <div id="image1">
    <img src="http://s18.postimg.org/3r3infdx5/TV_tonight_House_Gossip_Girl_Bachelor_CUTOCBM_x.jpg" alt="troll face">
    </div>
    <section id="line1">
    <p> Hello, This is your first paragraph where you can write things and whatever. </p>
    </section>
    <section id="line2">
    <p>This is your second paragraph lets fill it with malarchy! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet iaculis ligula et venenatis. Etiam viverra turpis felis, non cursus neque ornare quis. Pellentesque at pulvinar erat. Suspendisse odio orci, dictum eu faucibus quis, congue vel neque. Nulla porta dui semper ipsum sagittis, viverra rhoncus nisl lacinia. Maecenas rutrum ultrices quam, eget pulvinar felis ultricies ac. Vivamus rhoncus et sem non posuere. Suspendisse et sem nec urna suscipit hendrerit et ut velit. Vestibulum sapien mi, malesuada vitae posuere ut, blandit eu tortor.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce rutrum vel velit non pharetra. Vestibulum non libero a sem rhoncus aliquam quis nec sapien. Aenean pharetra, diam at molestie dictum, risus mauris faucibus enim, non cursus mi velit ac diam. Donec rhoncus diam in libero dapibus, vel tempus nunc ornare. Curabitur in bibendum leo, sed luctus lacus. Curabitur aliquam eleifend elementum. In et tincidunt nulla. Aenean sit amet mi mollis, interdum odio vel, molestie mi. Curabitur dictum egestas justo ac gravida. Phasellus cursus elementum magna, eu pharetra turpis fermentum id. Mauris non lorem bibendum enim molestie fringilla. Praesent posuere, ligula aliquet varius suscipit, massa mauris vulputate justo, eu feugiat neque nulla id urna. Suspendisse porttitor malesuada lectus, a commodo turpis pharetra a. Aliquam in nulla sed sapien elementum posuere.</p>
    </section>
    <div id="trollface">
    <img src="http://s11.postimg.org/kjeu8oeab/you_mad_bro.png" alt="troll face">
    </div>
    </body>
    <footer>
    </footer>
    </html>
    Your image now has an id of "image1"

    Now we have added a new picture your page should look like this.



    ...but something is missing... It's our heading. We have added it and it is not showing up. Any reason why? You guessed it! We haven't set the font color for the heading to white.

    Go to your stylesheet.css and make the heading font white.

    Code:
    body {background: black;}

    p {
       font: verdana;
       color: white;
       }
       
    #trollface {
       border: solid white 2px;
       }

    h1 {color: white;}
    Let's add more filler text in paragraph 1.

    Code:
    <!DOCTYPE html>
    <head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen" />
    <title> This is the title of your website </title>
    </head>
    <body>
    <h1>This is your heading</h1>
    <div id="image1">
    <img src="http://s18.postimg.org/3r3infdx5/TV_tonight_House_Gossip_Girl_Bachelor_CUTOCBM_x.jpg" alt="troll face">
    </div>
    <section id="line1">
    <p> Hello, This is your first paragraph where you can write things and whatever. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend auctor orci, vel fringilla eros rhoncus id. Nullam venenatis pellentesque posuere. Ut molestie laoreet quam vitae volutpat. Vestibulum commodo posuere diam vitae porttitor. Ut in ante pellentesque, pulvinar dolor in, tristique augue. In quis nibh est. Phasellus iaculis nunc sed rhoncus tempus. Aliquam erat volutpat. Suspendisse potenti. Etiam dignissim orci et congue mollis. Donec cursus dictum quam ac consectetur. Etiam a urna risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque pharetra lacus est, quis hendrerit nibh blandit eget. Morbi mattis tempor elit, ac faucibus felis auctor in. Aenean vulputate ullamcorper eros, id dapibus nibh scelerisque et.
    Maecenas congue porttitor odio. Praesent accumsan, nisi vitae bibendum auctor, diam lectus egestas purus, sed ultricies sapien mauris fringilla felis. Duis metus ipsum, hendrerit non enim a, ornare mattis enim. Morbi volutpat nec dui id adipiscing. Fusce ut sollicitudin odio. Ut suscipit, tellus eu molestie tristique, augue ante rutrum purus, tincidunt fermentum quam leo eu nisi. Proin convallis aliquet nibh, eu eleifend libero ornare eu. Pellentesque neque arcu, ultrices ut gravida faucibus, tempus quis augue. Proin accumsan nisi vel nulla rhoncus ultrices. Sed consectetur ac leo sit amet placerat. Donec nisl ante, egestas sit amet fermentum vitae, interdum at diam.</p>
    </section>
    <section id="line2">
    <p>This is your second paragraph lets fill it with malarchy! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet iaculis ligula et venenatis. Etiam viverra turpis felis, non cursus neque ornare quis. Pellentesque at pulvinar erat. Suspendisse odio orci, dictum eu faucibus quis, congue vel neque. Nulla porta dui semper ipsum sagittis, viverra rhoncus nisl lacinia. Maecenas rutrum ultrices quam, eget pulvinar felis ultricies ac. Vivamus rhoncus et sem non posuere. Suspendisse et sem nec urna suscipit hendrerit et ut velit. Vestibulum sapien mi, malesuada vitae posuere ut, blandit eu tortor.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce rutrum vel velit non pharetra. Vestibulum non libero a sem rhoncus aliquam quis nec sapien. Aenean pharetra, diam at molestie dictum, risus mauris faucibus enim, non cursus mi velit ac diam. Donec rhoncus diam in libero dapibus, vel tempus nunc ornare. Curabitur in bibendum leo, sed luctus lacus. Curabitur aliquam eleifend elementum. In et tincidunt nulla. Aenean sit amet mi mollis, interdum odio vel, molestie mi. Curabitur dictum egestas justo ac gravida. Phasellus cursus elementum magna, eu pharetra turpis fermentum id. Mauris non lorem bibendum enim molestie fringilla. Praesent posuere, ligula aliquet varius suscipit, massa mauris vulputate justo, eu feugiat neque nulla id urna. Suspendisse porttitor malesuada lectus, a commodo turpis pharetra a. Aliquam in nulla sed sapien elementum posuere.</p>
    </section>
    <div id="trollface">
    <img src="http://s11.postimg.org/kjeu8oeab/you_mad_bro.png" alt="troll face">
    </div>
    </body>
    <footer>
    </footer>
    </html>
    Now let's float our first image to the right of the page and clear line2 of the float command. This will let text fall next to our image.

    Code:
    body {background: black;}

    p {
       font: verdana;
       color: white;
       }
       
    #trollface {
       border: solid white 2px;
       }

    h1 {color: white;}

    #image1 {
       float: right;
       }
    #line2 {clear:both;}
    Let's add a 2px black border to image1 and make the padding 10px so we give the image some space from it's surroundings.

    Code:
    body {background: black;}

    p {
       font: verdana;
       color: white;
       }
       
    #trollface {
       border: solid white 2px;
       }

    h1 {color: white;}

    #image1 {
       float: right;
       border: solid black 2px;
       padding: 10px;
       }
    #line2 {clear:both;}
    There you have it! We have successfully made an html page from scratch. Congratulations!!! cheers 



    #webtut #web #WGD #webdeveloper #programming #programmer #css #html #webpage #design #tut #tutorial


    _________________
    PUPPYCHEESE Is KOOL!  D;

    View user profile http://www.converseit.net

    View previous topic View next topic Back to top Message [Page 1 of 1]

    Permissions in this forum:
    You cannot reply to topics in this forum

     

    ^ Back to Top