Html

WHAT IS HTML

The Web Structure

The ability to code using HTML is essential for any web professional. Acquiring this skill should be the starting point for anyone who is learning how to create content for the web.

Modern Web Design
HTML: Structure
CSS: Presentation
JavaScript: Behavior
PHP or similar: Backend
CMS: Content Management
As said earlier, Knowing HTML very well is a must for every web developer, but more importantly, if you want to have outstanding look and feel of your web app, you have to master CSS as well. And of course, used both at backend and frontend, JavaScript is the main weapon in every web developer's inventory.

In this article, we will try to cover core concepts every web developer should know about.

HTTP Protocol
HTTP stands for Hypertext Transfer Protocol.
As a web developer, you should be familiar with at least the main HTTP methods, GET, POST, PUT, DELETE.
Also, it is really preferred to know the common HTTP status codes: 200 (OK), 400 (Bad Request), 404, 500 etc.
Remember:
- 2xx are success codes
- 3xx, redirection codes
- 4xx indicate client errors, and
- 5xx indicate server errors.
Most APIs are currently supporting HTTPS instead of HTTP. HTTPS stands for HTTP Secure, where the communication between the client and the server is encrypted.

API
API stands for Application Programming Interface. It is created by developers to allow the usage of service functionalities.
For example, if you need to convert addresses into geographic coordinates you can use Google Maps Geocoding API, and for a broader range of maps-related things you can use the Google Maps API.
Working with APIs supposes usage of API keys, unique identifiers allowing to authorize to the service while accessing its functionalities.

Data Formats
You will mostly encounter either XML (eXtensible Markup Language) or JSON (JavaScript Object Notation), the latter being a more popular data format nowadays.

HTML is easy to learn. So don't wait! Dive right in!

HTML BASIC STRUCTURE

The <html> Tag

Although various versions have been released over the years, HTML basics remain the same.

The structure of an HTML document has been compared with that of a sandwich. As a sandwich has two slices of bread, the HTML document has opening and closing HTML tags.

These tags, like the bread in a sandwich, surround everything else:

<!Doctype html>

<html> .....this is the opening tag every code comes under this and must all end in the closing tag.

</html>.....this is the closing tag

THE HEAD TAG

The <head> Tag

Immediately following the opening HTML tag, you'll find the head of the document, which is identified by opening and closing head tags.

The head of an HTML file contains all of the non-visual elements that help make the page work.

<html>
<head>…the opening tag of head

</head> ..... The closing tag of head

</html>

Note that the head comes after HTML and then processed but first closes followed by the HTML tag

The <body> Tag

The body tag follows the head tag.
All visual-structural elements are contained within the body tag.

Headings, paragraphs, lists, quotes, images, and links are just a few of the elements that can be contained within the body tag.

Basic HTML Structure:

<!Doctype html>

EXERCISE.

REARRANGE THE CODES TO FORM BASIC HTML STRUCTURES

1. <HTML>

2. <body>

3. </body>

4. <head><head>

5. </HTML>

The following will be arranged thus to form the basic HTML structure

1,4,2,3,5

in this chapter let's talk about creating your first page

The HTML File

HTML files are text files, so you can use any text editor to create your first webpage.
There are some very nice HTML editors available; you can choose the one that works for you. For now let's write our examples in Notepad.

You can run, save, and share your HTML codes on our Code Playground, without installing any additional software.
Now let's do this,

Add the basic HTML structure to the text editor with "This is a line of text" in the body section.
Your code should be like this :
<html>

Don’t forget to save the file. HTML file names should end in either .html or .htm

In our example, the file is saved as first.html

When the file is opened, the following result is displayed in the web browser:

The <title> Tag

To place a title on the tab describing the web page, add a <title> element to your head section:

<html>
   <head>
      <title>first page</title>
   </head>
   <body>
      This is a line of text.
   </body>
</html>

This will produce the following result:

NOTE:
The title element is important because it describes the page and is used by search engines.

Creating a Blog

Throughout this course, we'll help you practice and create your own unique blog project, so you'll retain what you've learned and be able to put it to use. Just keep going and follow the instructions in the TASK section. This is what your finished blog page will look like.

TASK:
1. Copy the code.
2. On the top header, change the name to your own name.
3. Change the page title. Remember, the page title is located inside the <title> tag in the <head> of the page.

4. Edit every possible code and run at interval to see what it does on the page.
5. Don't forget to save your code with the extension .HTML or .htm to the name of the file
GOOD LUCK.
HERE is the code.

<!DOCTYPE html>
<html>
<head>

<title>My Blog</title>
        <link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet">
    </head>

    <body>
        
        <div id="header" class="section">
            <img alt="" class="img-circle" src="https://code.sololearn.com/Icons/Avatars/0.jpg">
            <p>Azorji kelechi kelvin</p>
        </div>
        

        
        <div class="section">
            <h1><span>About Me</span></h1>
            <p>
                Hey! I'm <strong>kelvin</strong>. Coding has changed my world. It's not just about apps. Learning to code gave me <i>problem-solving skills</i> and a way to communicate with others on a technical level. I can also develop websites and use my coding skills to get a better job. And I learned it all at <strong>SoloLearn</strong> where they build your self-esteem and keep you motivated. Join me in this rewarding journey. You'll have fun, get help, and learn along the way!
            </p>
            <p class="quote">"Declare variables, not war"</p>
        </div>
        

        
        <div class="section">
            <h1><span>My Coding Schedule</span></h1>
            <table>
                <tr>
                    <th>Day</th>
                    <th>Mon</th>
                    <th>Tue</th>
                    <th>Wed</th>
                    <th>Thu</th>
                    <th>Fri</th>
                </tr>
                <tr>
                    <td>8-8:30</td>
                    <td class="selected">Learn</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>9-10</td>
                    <td></td>
                    <td class="selected">Practice</td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>1-1:30</td>
                    <td></td>
                    <td></td>
                    <td class="selected">Play</td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>3:45-5</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td class="selected">Code</td>
                    <td></td>
                </tr>
                <tr>
                    <td>6-6:15</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td class="selected">Discuss</td>
                </tr>
            </table>
        </div>
        


        
        <div class="section">
            <h1><span>My Skills</span></h1>
            <ul>
                <li>HTML <br />
                    <progress min="0" max="100" value="80"></progress>
                </li>
                <li>JavaScript <br />
                    <progress min="0" max="100" value="50"></progress>
                </li>
                <li>Python <br />
                    <progress min="0" max="100" value="30"></progress>
                </li>
            </ul>
        </div>
        


         
        <div class="section">
            <h1><span>My Media</span></h1>
            <iframe height="150" width="300" src="https://www.youtube.com/embed/Q6_5InVJZ88" allowfullscreen frameborder="0"></iframe>
        </div>
        

        
       <div class="section">
            <h1><span>Contact Me</span></h1>

            <svg class="face" height="100" width="100">
                <circle cx="50" cy="50" r="50" fill="#FDD835"/>
                <circle cx="30" cy="30" r="10" fill="#FFFFFF"/>
                <circle cx="70" cy="30" r="10" fill="#FFFFFF"/>
                <circle cx="30" cy="30" r="5" fill="#000000"/>
                <circle cx="70" cy="30" r="5" fill="#000000"/>
                <path d="M 30 70 q 20 20 40 0" stroke="#FFFFFF" stroke-width="5" fill="none" />
            </svg>

            <form>
                <input name="name" placeholder="Name" type="text" required /><br/>
                <input name="email" placeholder="Email" type="email" required /><br/>
                <textarea name="message" placeholder="Message" required ></textarea>
                <input type="submit" value="SEND" class="submit" />
            </form>
        </div>
        

        
        <div class="section" id="contacts">
            <h1><span>Follow Me</span></h1>
            <div>
                <a href="https://www.sololearn.com/" target="_blank">
                    <img alt="SoloLearn" src="https://www.sololearn.com/Uploads/icons/sololearn.png" />
                </a>
                <a href="#">
                    <img alt="Facebook" src="https://www.sololearn.com/Uploads/icons/facebook.png"/>
                </a>
                <a href="#">
                    <img alt="Twitter" src="https://www.sololearn.com/Uploads/icons/twitter.png" />
                </a>
            </div>
        </div>
        

        <div class="copyright">
            © 2017 My Blog. All rights reserved.
        </div>

    </body>
<body>
<style>
  html {

    margin: 0;
    padding: 0;
}
body {
    font-family: 'Handlee', cursive;
    font-size: 13pt;
    background-color: #efefef;
    padding: 10px;
    margin: 0;
}
h1 {
    font-size: 15pt;
    color: #20bcd5;
    text-align: center;
    padding: 18px 0 18px 0;
    margin: 0 0 10px 0;
}
h1 span {
    border: 4px dashed #20bcd5;
    padding: 10px;
}
p {
    padding: 0;
    margin: 0;
}
.img-circle {
    border: 3px solid white;
    border-radius: 50%;
}
.section {
    background-color: #fff;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 10px;
}
#header {
    background-image: url("https://www.sololearn.com/Uploads/header.jpg");
    background-size: cover;
}
#header img {
    display: block;
    width: 80px;
    height: 80px;
    margin: auto;
}
#header p {
    font-size: 25pt;
    color: #3b464c;
    padding-top: 5px;
    margin: 0;
    font-weight: bold;
    text-align: center;
}
.quote {
    font-size: 12pt;
    text-align: right;
    margin-top: 10px;
}
table {
    width: 100%;
}
table, th, td {
    border: 2px solid #cecece;
    border-collapse: collapse;
    text-align: center;
    table-layout: fixed;
}
.selected {
    background-color: #f36f48;
    font-weight: bold;
    color: white;
}
li {
    margin-bottom: 15px;
    font-weight: bold;
}
progress {
    width: 70%;
    height: 20px;
    color: #3fb6b2;
    background: #efefef;
}
progress::-webkit-progress-bar {
    background: #efefef;
}
progress::-webkit-progress-value {
    background: #3fb6b2;
}
progress::-moz-progress-bar {
    color: #3fb6b2;
    background: #efefef;
}
iframe, audio {
    display: block;
    margin: 0 auto;
    border: 3px solid #3fb6b2;
}
hr {
    border: 0;
    height: 1px;
    background: #f36f48;
}
form {
    text-align: center;
    margin-top: 0;
}
.submit {
    background-color: #3fb6b2;
    padding: 12px 45px;
    border-radius: 5px;
    cursor: pointer;
    color: #ffffff;
    border: none;
    outline: none;
    margin: 0;
    font-weight: bold;
}
.submit:hover {
    background-color: #43a09d;
}
textarea {
    height: 100px;
}
input, textarea {
    margin-bottom: 10px;
    font-size: 11pt;
    padding: 15px 10px 10px;
    border: 1px solid #cecece;
    background-color: #efefef;
    color: #787575;
    border-radius: 5px;
    width: 70%;
    outline: none;
}
.face {
    transform: scale(0.4);
    margin: 0 auto;
    display: block;
    margin-top: -35px;
    margin-bottom: -25px;
}
#contacts img {
    height: 50px;
    width: 50px;
    margin-left: 7px;
    margin-right: 7px;
}
#contacts a {
    text-decoration: none;
}
#contacts img:hover {
    opacity: 0.8;
}
#contacts {
    text-align: center;
}
.copyright {
    font-size: 8pt;
    text-align: right;
    padding-bottom: 10px;
    color: grey;
}

</style>
</body>
</html>

Don't be afraid of long codes. By the time you complete the course, everything will make complete sense and look highly doable. We guarantee it!

The <p> Element

To create a paragraph, simply type in the <p> element with its opening and closing tags:

<html>
   <head>
      <title>first page</title>
   </head>
   <body>
      <p>This is a paragraph. </p>
      <p>This is another paragraph. </p>
   </body>
</html>

Browsers automatically add an empty line before and after a paragraph.

Single Line Break

Use the <br /> tag to add a single line of text without starting a new paragraph:

<html>
   <head>
      <title>first page</title>
   </head>
   <body>
      <p>This is a paragraph.</p>
      <p>This is another paragraph. </p>
      <p>This is <br /> a line break </p>
   </body>
</html>

The <br /> element is an empty HTML element. It has no end tag.

Single Line Break
Opening the HTML file in the browser shows that a single line break has been added to the paragraph:

Formatting Elements

In HTML, there is a list of elements that specify text style.
Formatting elements were designed to display special types of text:

<html>
   <head>
      <title>first page</title>
   </head>
   <body>
      <p>This is regular text </p>
      <p><b> bold text </b></p>
      <p><big> big text </big></p>
      <p><i> italic text </i></p>
      <p><small> small text </small></p>
      <p><strong> strong text </strong></p>
      <p><sub> subscripted text </sub></p>
      <p><sup> superscripted text </sup></p>
      <p><ins> inserted text </ins></p>
      <p><del> deleted text </del></p>
   </body>
</html>

Here is what you see on your browser

Each paragraph in the example is formatted differently to demonstrate what each tag does.

Browsers display <strong> as <b>, and <em> as <i>.
However, the meanings of these tags differ: <b> and <i> define bold and italic text, respectively, while <strong> and <em> indicate that the text is "important".

HTML Headings

HTML includes six levels of headings, which are ranked according to importance.
These are <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.

The following code defines all of the headings:

<html>

   <head>
      <title>first page</title>
   </head>
   <body>
      <h1>This is heading 1</h1>
      <h2>This is heading 2</h2>
      <h3>This is heading 3</h3>
      <h4>This is heading 4</h4>
      <h5>This is heading 5</h5>
      <h6>This is heading 6</h6>
   </body>
</html>

It is not recommended that you use headings just to make the text big or bold, because search engines use headings to index the web page structure and content.

Horizontal Lines
To create a horizontal line, use the <hr /> tag.

<html>
   <head>
      <title>first page</title>
   </head>
   <body>
      <h1>This is heading 1</h1>
      <h2>This is heading 2</h2>
      <h3>This is heading 3</h3>
      <h4>This is heading 4</h4>
      <h5>This is heading 5</h5>
      <h6>This is heading 6</h6>
      <p>This is a paragraph </p>
      <hr />
      <p>This is a paragraph </p>
   </body>
</html>

Comments

The browser does not display comments, but they help document the HTML and add descriptions, reminders, and other notes.

<html>
   <head>
      <title>first page</title>
   </head>
   <body>
      <p>This is a paragraph </p>
      <hr />
      <p>This is a paragraph </p>
      
   </body>
</html>

Comments

Anonymous25 June 2018 at 01:13
I enjoyed this thank you
ReplyDelete
Replies

Add comment

Search This Blog

Html

WHAT IS HTML

HTML BASIC STRUCTURE

THE HEAD TAG

Comments

Post a Comment

Popular Posts

HOW TO FORMAT ANDROID PHONES