search

What is the html code for web page?

Ngày đăng: 09/10/2022
Trả lời: 0
Lượt xem: 7

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

Show
What is the html code for web page?

Welcome! You’ve Found the Easiest Way to Learn HTML and CSS.

Contents

  • 1 Welcome! You’ve Found the Easiest Way to Learn HTML and CSS.
  • 2 HTML for Absolute Beginners
    • 2.1 What is HTML?
    • 2.2 The History of HTML
    • 2.3 What are Tags and Attributes?
    • 2.4 HTML Editors
    • 2.5 Creating Your First HTML Webpage
    • 2.6 Adding Content
    • 2.7 How To Close an HTML Document
    • 2.8 Troubleshooting
  • 3 Our Other HTML Tutorials
    • 3.1 Intermediate & Advanced Tutorials
    • 3.2 HTML Reference Guides
    • 3.3 HTML Attributes Reference Guide
    • 3.4 HTML Cheat Sheet
    • 3.5 The HTML.com Blog
    • 3.6 The HTML.com Guide to Web Hosting
  • 4 Improve Your HTML Skills

Whether you are a novice, hoping to delve into the world of web design or an experienced webmaster keen to improve your skills, we’ve got online tutorials tailored to your web design needs.

Our absolute beginner tutorial will turn you from wannabe to webmaster in just a few hours. Unlike many other HTML tutorials, it’s a step-by-step guide – not a boring long-winded reference.

Our step-by-step guide teaches you the basics of HTML and how to build your first website. That means how to layout an HTML page, how to add text and images, how to add headings and text formatting, and how to use tables.

We’ll get you building your new website in minutes, not hours.

HTML for Absolute Beginners

While many guides on the internet attempt to teach HTML using a lot of mind-boggling theory, this tutorial will instead focus on giving you the practical skills to build your first site.

The aim is to show you ‘how’ to create your first web page without spending the entire tutorial focusing too much on the “why.”

By the end of this tutorial, you will have the know-how to create a basic website and we hope that this will inspire you to delve further into the world of HTML using our follow-on guides.

What is HTML?

Okay, so this is the only bit of mandatory theory. In order to begin to write HTML, it helps if you know what you are writing.

HTML is the language in which most websites are written. HTML is used to create pages and make them functional.

The code used to make them visually appealing is known as CSS and we shall focus on this in a later tutorial. For now, we will focus on teaching you how to build rather than design.

The History of HTML

HTML was first created by Tim Berners-Lee, Robert Cailliau, and others starting in 1989. It stands for Hyper Text Markup Language.

Hypertext means that the document contains links that allow the reader to jump to other places in the document or to another document altogether. The latest version is known as HTML5.

A Markup Language is a way that computers speak to each other to control how text is processed and presented. To do this HTML uses two things: tags and attributes.

What are Tags and Attributes?

Tags and attributes are the basis of HTML.

They work together but perform different functions – it is worth investing 2 minutes in differentiating the two.

What Are HTML Tags?

Tags are used to mark up the start of an HTML element and they are usually enclosed in angle brackets. An example of a tag is:

.

Most tags must be opened

and closed

in order to function.

What are HTML Attributes?

Attributes contain additional pieces of information. Attributes take the form of an opening tag and additional info is placed inside.

An example of an attribute is:

What is the html code for web page?

In this instance, the image source (src) and the alt text (alt) are attributes of the

What is the html code for web page?
Sublime Text 3 has a mini-preview window on the right.

Pros

  • Easily customizable
  • Beginner-friendly
  • Pleasant color schemes to choose from.

Cons

  • Can’t print documents or code
  • No toolbar or dashboard available.

Notepad ++

Another common choice for HTML and other language coders is Notepad ++. It is a tiny program to download and perform the functions you need for writing clean code.

What is the html code for web page?
This is Notepad ++. Far from glamorous but does the job.

Pros

  • Distraction-free interface
  • Auto-completion feature
  • Plugin options for extended functionalities.

Cons

  • Can be difficult to get used to for beginners
  • No support for Mac.

Komodo Edit

Komodo Edit is one of two editors released by the same label. They offer a simple, open-source editor with a variety of extensions and language support.

It is free to download.

What is the html code for web page?
Komodo isn’t one for a flash interface either but is simple to use.

Pros

  • Easy-to-grasp coding interface
  • Available for Mac, Windows, and Linux
  • Impressive language support.

Cons

  • No autocompletion by default
  • Visual settings are difficult to find and change.

What To Avoid

Your code’s front-end view varies from browser to browser – you will learn more about this with advanced CSS.

Do not use Microsoft Word or any other word processor when writing HTML code, only an HTML editor or at the very least, your machine’s built-in notepad, is suitable for the task.

Secondly, ensure that you’ve installed a number of different browsers such as Chrome and Firefox in order to preview your upcoming creation.

Creating Your First HTML Webpage

First off, you need to open your HTML editor, where you will find a clean white page on which to write your code.

From there you need to layout your page with the following tags.

Basic Construction of an HTML Page

These tags should be placed underneath each other at the top of every HTML page that you create.

— This tag specifies the language you will write on the page. In this case, the language is HTML 5.

— This tag signals that from here on we are going to write in HTML code.

— This is where all the metadata for the page goes — stuff mostly meant for search engines and other computer programs.

— This is where the content of the page goes.

What is the html code for web page?
This is how your average HTML page is structured visually.

Further Tags

Inside the tag, there is one tag that is always included: </code>, but there are others that are just as important:</p><code><title></code>This is where we <strong>insert the page name</strong> as it will appear at the top of the browser window or tab.<code><meta></code>This is where information about the document is stored: character encoding, name (page context), description.<p><strong>Let’s try out a basic <code><head></code> section:</strong></p><p><pre><code><head> <title>My First Webpage .

Adding Content

Next, we will make tag.

The HTML is where we add the content which is designed for viewing by human eyes.

This includes text, images, tables, forms and everything else that we see on the internet each day.

How to Add HTML Headings To Your Web Page

In HTML, headings are written in the following elements:

As you might have guessed

and

should be used for the most important titles, while the remaining tags should be used for sub-headings and less important text.

Search engine bots use this order when deciphering which information is most important on a page.

Creating Your Heading

Let’s try it out. On a new line in the HTML editor, type:

Welcome to My Page

And hit save. We will save this file as “index.html” in a new folder called “my webpage.”

The Moment of Truth: Click the newly saved file and your first ever web page should open in your default browser. It may not be pretty it’s yours… all yours. *Evil laugh*

Well let’s not get carried away; we’ve still got loads of great features that we can add to your page.

How To Add Text In HTML

Adding text to our HTML page is simple using an element opened with the tag

which creates a new paragraph. We place all of our regular text inside the element

.

When we write text in HTML, we also have a number of other elements we can use to control the text or make it appear in a certain way.

Other Key Elements

They are as follows:

ElementMeaningPurpose
Bold Highlight important information
Strong Similarly to bold, to highlight key text
Italic To denote text
Emphasised Text Usually used as image captions
Marked Text Highlight the background of the text
Small Text To shrink the text
Striked Out Text To place a horizontal line across the text
Underlined Text Used for links or text highlights
Inserted Text Displayed with an underline to show an inserted text
Subscript Text Typographical stylistic choice
Superscript Text Another typographical presentation style

These tags must be opened and closed around the text in question.

Let’s try it out. On a new line in the HTML editor, type the following HTML code:

Welcome to my brand new website. This site will be my new home on the web.

Don’t forget to hit save and then refresh the page in your browser to see the results.

How To Add Links In HTML

As you may have noticed, the internet is made up of lots of links.

Almost everything you click on while surfing the web is a link takes you to another page within the website you are visiting or to an external site.

Links are included in an attribute opened by the tag. This element is the first that we’ve met which uses an attribute and so it looks different to previously mentioned tags.

The Anchor Tag

The (or anchor) opening tag is written in the format:

The first part of the attribute points to the page that will open once the link is clicked.

Meanwhile, the second part of the attribute contains the text which will be displayed to a visitor in order to entice them to click on that link.

If you are building your own website then you will most likely host all of your pages on professional web hosting. In this case, internal links on your website will Link Title Here.

Let’s Create An Anchor Tag

Let’s try it out. Make a duplicate of the code from your current index.html page. Copy / paste it into a new window in your HTML editor.

Save this new page as “page2.html” and ensure that it is saved in the same folder as your index.html page.

On page2.html add the following code:

This will create a link to Google on page 2. Hit save and return to your index.html page.

On a new line on index.html add the following code:

Page2

Ensure the folder path to the file (page2.html) is correct. Hit save and preview index.html in your browser.

If everything is correct then you will see a link which will take you to your second page. On the second page, there will be a link that will take you to google.com.

How To Add Images In HTML To Your Website

In today’s modern digital world, images are everything. The

What is the html code for web page?
You can check the file type of an image by right-clicking the item and selecting ‘Properties’.

You can also define borders and other styles around the image using the class attribute. However, we shall cover this in a later tutorial.

The file types generally used for image files online are: .jpg, .png, and (less and less) .gif.

Alt text is important to ensure that your site is ranked correctly on search sites and also for visually impaired visitors to your site.

The

What is the html code for web page?

Let’s try it out.

Create Your Own Image With An Alt Text

Don’t be afraid to play around with the test code – it’s a great way to have fun while learning.

Save an image (.jpg, .png, .gif format) of your choice in the same folder where you’ve saved index.html and page2.html. Call this image “testpic.jpg.”

On a new line in your HTML editor enter the following code:

What is the html code for web page?

Hit save and preview the index.html page in your browser.

How To Make an HTML List

In web design, there are 3 different types of lists which you may wish to add to your site.

Ordered List

The first is an

    : This is an ordered list of contents. For example:

    1. An item
    2. Another item
    3. Another goes here.

    Inside the

      tag we list each item on the list inside
      2. tags.

      For example:

        

      1. An item 
        2. 

      2. Another item 
        3. 

      3. Another goes here 
        4.
      Unordered List

      The second type of list that you may wish to include is an