Skip to main content

learn html in 5 minute

Why learn HTML?

Every webpage you look at is written in a language called HTML. You can think of HTML as the skeleton that gives every webpage structure. In this course, we'll use HTML to add paragraphs, headings, images and links to a webpage.
In the editor to the right, there's a tab called test.html. This is the file we'll type our HTML into. See the code with the <>s? That's HTML! Like any language, it has its own special syntax (rules for communicating).
When we press Save & Submit Code, the results tab will act like an Internet browser (e.g. Chrome, Firefox, Internet Explorer). A browser's job is to transform the code in test.html into a recognizable webpage! It knows how to lay out the page by following the HTML syntax.
Instructions
  1. Today we are learning how to createhtml file.
  2. Change the text on line 2 (the bit between <strong> and </strong>) to anything you like!
  3. Hit Save & Submit Code, and you'll see how the test.html file would look in a browser. Did you see that? The <strong></strong> tags made our text bold!
  4. Hint
    In HTML, the order you put things in matters! But formatting (i.e. empty space) doesn't matter from a technical point of view.
    You will notice there's a pattern in how we indent each line of HTML, though. This is to aid readability and help us catch mistakes. We'll talk more about indentation later!
     
  5. Hint
    If you're not sure what to change the text on line 2 to, why not change Feel free to change this text. to I'm about to learn HTML?
    Don't change or remove the <strong> bit or the </strong> bit! We'll explain what those do soon.
    HTML and CSS
    HTML stands for HyperText Markup Language. Hypertext means "text with links in it." Any time you click on a word that brings you to a new webpage, you've clicked on hypertext!
    A markup language is a programming language used to make text do more than just sit on a page: it can turn text into images, links, tables, lists, and much more. HTML is the markup language we'll be learning.
    What makes webpages pretty? That's CSS—Cascading Style Sheets. Think of it like skin and makeup that covers the bones of HTML. We'll learn HTML first, then worry about CSS in later courses.
    The first thing we should do is set up the skeleton of the page.
    a. Always put <!DOCTYPE html> on the first line. This tells the browser what language it's reading (in this case, HTML).
    b. Always put <html> on the next line. This starts the HTML document.
    c. Always put </html> on the last line. This ends the HTML document.
    Instructions
    1. Go ahead and put the three lines mentioned above into test.html, which is now blank.
    2. In between the second and last line (between the <html> and the </html>), feel free to write whatever message you like.

      Basic terminology
      To learn more HTML, we should learn how to talk about HTML. Already you have seen we use <>s a lot.
      1. Things inside <>s are called tags.
      2. Tags nearly always come in pairs: an opening tag and a closing tag.
      3. Example of opening tag: <html>
      4. Example of closing tag: </html>
      You can think of tags as being like parentheses: whenever you open one, you should close it. Tags also nest, so you should close them in the right order: the most recently opened tag should be the first one closed, like in the example below.
      <first tag><second tag>Some text!</second tag></first tag>
      
      The last exercise taught us how to set up our HTML file. Everything we do now will go between <html> and </html>.
      Practice makes perfect! One more time:
      Instructions
    3. Put in the <!DOCTYPE HTML> tag.
    4. Put in the <html> opening and closing tags.
    5. Between the <html> tags, write whatever you like.
    6. Press Save & Submit Code to see what you've written appear on the page!

    7. Make the head
      Everything in our HTML file will go between the opening <html> and closing </html> tags.
      There are always two parts to an HTML file: the head and the body. Let's start with the head.
      The head contains information about your HTML file, like its title. The title is what we see in the browser's title bar or page tab. For example the title of this page is "HTML Basics | Codecademy".
      Instructions
      Let's add a head and a title to our webpage. If you get stuck at any point, click "Stuck? Get a hint!" below for an example.
    8. Add an opening <head> tag and closing </head> tag.
    9. Between the <head> tags, add in an opening <title> tag and closing </title> tag.
    10. Between the <title> tags, write in a title for your page. For example, "My Webpage."
    11. Press "Save & Submit Code" to continue
    12. Paragraphs in the body
      Great job! To review, an HTML file has both a head and a body. The head is where you put information about your HTML file, like its title.
      The body is where you put your content, such as text, images, and links. The content in the body is what will be visible on the actual page.
      The body goes inside the <html> tags, right after the <head> tags, like this:
      <html>
        <head>
          <title>My Webpage</title>
        </head>
      
        <body>
        </body>
      </html>
      
      Instructions
    13. Underneath the closing </head> tag, put an opening <body> tag and a closing </body> tag, like in the example above.
    14. Inside the body, create two paragraphs. Each paragraph starts with an opening <p> tag and ends with a closing </p> tag. We can write content in between the tags, like this:
    <body>
        <p>Hello world!</p>
    </body>
    
    1.  


    2. Paragraphs and headings
      We're definitely making good progress! We've learned when and why we use HTML. We've also learned how to:
      a. Set up an HTML file with tags
      b. Title the webpage (in the <head>)
      c. Create paragraphs (in the <body> with <p> tags)
      The next step is to give our paragraphs headings using heading tags. Let's start with the <h1> tag. The content between this tag will be the biggest!
      Instructions
    3. In the body section, create a heading. To do this, create an <h1> tag.
    4. Add content.
    5. Close the element with a closing tag </h1>. (Your content should now be between <h1> and </h1>.)
    6. Underneath the heading tags, create two paragraphs using <p> tags with whatever content you like.
    7. More about headings!
      HTML actually lets us have more than one heading size. There are six heading sizes, where <h1> is the boss and <h6> is puny!
      • <h1> - The CEO
      • <h2> - VP
      • <h3> - Director
      • <h4> - Middle management
      • <h5> - Lowly assistant
      • <h6> - Gets coffee for everyone
      Below we'll ask you to add headings of various sizes. Feel free to write whatever you like for the headings!
      Instructions
      1. Your code currently has one <h1> heading and two paragraphs.
      2. Add an <h3> heading before the second paragraph.
      3. Add an <h5> heading after the second paragraph, and then add a third paragraph after this heading.
      4. Using every heading
        Nice work!
        Given that there are six heading sizes altogether, we should make use of all six.
        Instructions
        1. Add three more headings to the code, making use of <h2>, <h4> and <h6>. Make sure to close all your tags!
        2. Under each heading, add a short paragraph. Dont forget paragraphs need opening and closing <p></p> tags!
         
        Mid-lesson breather
        You've done an awesome job! Here's a quick summary of things we've learned:
        1. HTML is used to give websites structure.
        2. We open HTML files using a browser, and the browser renders (shows us) the file.
        3. HTML files have a <head> and a <body> (just like you!)
        4. In the head, we have the <title> tags, and we use these to specify the webpage's name.
        5. How to make headings and paragraphs.
        Instructions
        1. Add a title between the <title> tags.
        2. Create a <h3> sized heading in the body. Make your heading say anything you want! (Just don't forget to close it.)
        3. Create three paragraphs using <p> tags and fill them with content (e.g. about cars, your pet, favorite city to travel—whatever you like!)
        4. You're going places!
          What if you wanted to send the user to another part of your website, or another website altogether? You use hyperlinks, or links for short!
          <a href="http://www.codecademy.com">My Favorite Site!</a>
          
          1. First, there's an opening <a> tag and that tag has an attribute called href. The href value tells your link where you want it to go, in this case http://www.codecademy.com.
          2. Then you have a description of your link between your opening <a> and your closing </a> tags. This is what you will be able to click on.
          3. Finally, you have your closing </a> tag.
          Instructions
          1. In the body section, create a link. To do this, create an <a> tag. Point your link to a website by setting the value of the href attribute
          2. Add a description of your link
          3. Close the element with a closing tag </a>
            Adding images
            You can add images to your websites to make them look fancy.
            We use an image tag, like so: <img>. This tag is a bit different from the others. Instead of putting the content between the tags, you tell the tag where to get the picture using src. It's also different because there is no ending tag. It has / in the tag to close it: <img src="url" />.
            Check out the tag to the right—it adds a picture of a rubber duck to the page! (You can see it by clicking on the Preview button.)
            See the web address (or URL) after src=? It's "http://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg". That tells the <img> tag where to get the picture from!
            Every image on the web has its own image URL. Simply right-click on an image and choose "Copy image URL." Paste that URL in quotes after src= to insert with your <img> tag.
            Instructions
            Add a second image below the first one. (Make sure it's before the closing <body> tag!)
            If you can't think of a good picture, use this ninja:
            http://s3.amazonaws.com/codecademy-blog
            Click that image
            Good work! Now you know how to add links and images to your website. Why not make that image a link? For example:
            <a href="http://www.codecademy.com/">
                <img src="http://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg"/>
            </a>
            
            1. First we open our <a> tag and point the href to http://www.codecademy.com/ again.
            2. But this time, instead of using text inside the <a> tag, we use an <img> tag.
            3. Finally, we have our closing </a> tag.
            Now when you click on the yellow duck, you will be taken to http://www.codecademy.com!
            Placing one HTML tag inside of another is called nesting.
            Instructions
          4. In the body section, create an <a> tag.
          5. Choose a website to point your link to, like <a href="http://www.codecademy.com">.
          6. Now create your <img> tag between your opening <a> tag and closing </a> tag. Don't forget the src!
          7. Finally, close your </a> tag after your <img> tag.
          8. Images and links
            Good work! Let's make sure you really understand images and links before we move on to the review.
            Instructions
          9. Between the <body> tags, add two images using the <img> tag. One should be a link; the other should not. The link can go anywhere you want.
          10. After your two images, create a link that's just a line of text. It can link anywhere you want.
          11.  
          12.  
       
      Congratulations!
      Well done! You now know the basics of creating a web page. If you're feeling lucky, go ahead and tackle the Build Your Own Webpage project.
     

Popular posts from this blog

Hidden Wiki

Welcome to The Hidden WikiNew hidden wiki url 2015 http://zqktlwi4fecvo6ri.onion Add it to bookmarks and spread it!!!
Editor's picks Bored? Pick a random page from the article index and replace one of these slots with it.
The Matrix - Very nice to read. How to Exit the Matrix - Learn how to Protect yourself and your rights, online and off. Verifying PGP signatures - A short and simple how-to guide. In Praise Of Hawala - Anonymous informal value transfer system. Volunteer Here are five different things that you can help us out with.
Plunder other hidden service lists for links and place them here! File the SnapBBSIndex links wherever they go. Set external links to HTTPS where available, good certificate, and same content. Care to start recording onionland's history? Check out Onionland's Museum Perform Dead Services Duties. Introduction PointsAhmia.fi - Clearnet search engine for Tor Hidden Services (allows you to add new sites to its database). DuckDuckGo - A Hidden S…

[SOLVED] IDM WAS REGISTERED WITH A FAKE SERIAL NUMBER

[SOLVED] IDM WAS REGISTERED WITH A FAKE SERIAL NUMBER
Good News [May 08, 2015]: IDM developers got smarter, but the crackers are always a step ahead. Follow this article and send an email to uglyduckblog@gmail.com if you are desperate. I can NOT post any crack here for legal reasons. Happy Downloading with IDM. ;) *********** first tip is to use latest crack for idm from  onhax.net idm universal web crack and make sure u are using all latest vers I am sure many of us are too much dependent on Internet Download Manager a.k.a. IDM. The main reason didn’t permanently switch to linux was IDM. I mainly use it for batch downloading and download streaming videos. Till yesterday, IDM was working fine with me (of course with fake serial numbers, keygen, crack, patch etc. which could be found with little effort). But few days ago, with the latest update version 6.18 build 7 (released on Nov 09, 2013) Internet Download Manager was literally had a breakthrough and crushed all the serial numbers, …

DoubleAgent Attack Turns Your Antivirus Into Malware And Hijacks Your PC



Short Bytes: Cybellum security researchers have uncovered a new attack mechanism that can be used to take control of your antivirus and turn it into a malware. Called DoubleAgent, this attack exploits an old and undocumented vulnerability in Windows operating system. This Zero Day code injection technique affects all major antivirus vendors and has the power to hijack permissions. The security researchers from Cybellum have found a new technique that can be used by the cybercriminals to hijack your computer by injecting malicious code. This new Zero-Day attack can be used to take full control over all the major antivirus software. Instead of hiding from the antivirus, this attack takes control of the antivirus itself. Called DoubleAgent, this attack makes use of a 15-year-old legitimate feature of Windows (read vulnerability)–that’s why it can’t be patched. It affects all versions of Microsoft Windows. Cybellum blog mentions that this flaw is still unpatched by most antivirus v…