A simple text editor is all you need to learn HTML.

Web pages can be created and modified by using professional HTML editors.

However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac).

We believe that using a simple text editor is a good way to learn HTML.

Follow the steps below to create your first web page with Notepad or TextEdit.

Windows 8 or later:

Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.

Windows 7 or earlier:

Open Start > Programs > Accessories > Notepad

Open Finder > Applications > TextEdit

Also change some preferences to get the application to save files correctly. In Preferences > Format > choose "Plain Text"

Then under "Open and Save", check the box that says "Display HTML files as HTML code instead of formatted text".

Then open a new document to place the code.

Write or copy the following HTML code into Notepad:

Save the file on your computer. Select File > Save as in the Notepad menu.

Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred encoding for HTML files).

Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose "Open with").

The result will look much like this:

With our free online editor, you can edit the HTML code and view the result in your browser.

It is the perfect tool when you want to test code fast. It also has color coding and the ability to save and share code with others:

Click on the "Try it Yourself" button to see how it works.

If you want to create your own website and save your code online, try our free website builder, called W3schools Spaces:

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.

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.

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.

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.

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.

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

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:

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

Now that we’ve gotten the basic theory out of the way. It’s time to learn how to build our first website.

First off, we must ensure that we have the right tools. Most important, we need an HTML editor.

There are many choices on the market. Here are a handful of the most popular:

However, for this tutorial, we will use the Sublime Text 3 as it is free and also offers cross-platform support for Windows, Mac, and Linux users.

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.

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.

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.

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.

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

Inside the tag, there is one tag that is always included: tags. We’ll also indent this tags.

In the body section, let’s now add a heading and paragraph. Write out the heading content and wrap it in

We now have a basic HTML file that will load in your browser. Here’s what our completed file looks on the front end.

Below is how it would look on the front end. Note that only the heading and paragraph from the body section are rendered.

See the Pen HTML tutorial: final by HubSpot (@hubspot) on CodePen.

As you can see, this is a pretty skeletal page. To fill it, we need to learn some more page elements. Page elements are elements that are actually rendered on the front end. We’ve already used two of them,

and

. Let’s take a closer look at these page elements and others next.

If you'd prefer to watch how a more complex HTML file is built out with images, links, forms, and other elements, check out this video:

The first version of HTML consisted of just 18 elements. Since then, more versions have been released with dozens of tags added in each one. In the most recent version of HTML, HTML5, there are 110 HTML tags.

Don’t worry, though — there are only a handful that you’ll use the most often. Below we’ll review the most common elements and their tags.

Below we’ll review the most common elements and their tags.

The HTML paragraph element represents a paragraph. By placing

tags around text, you’ll make that text start on a new line.

See the Pen p example by Christina Perricone (@hubspot) on CodePen.

The HTML image element embeds an image into the document. It requires a src (source) attribute to render properly. An alt attribute should also be included in case the image doesn’t load properly or the reader has a visual impairment.

Here’s an example of an image with a source and alt attribute:

See the Pen img example by Christina Perricone (@hubspot) on CodePen.

The HTML heading elements represent different levels of section headings.

is the highest section level and the most prominent, whereas

is the lowest and therefore least prominent.

See the Pen headings example by Christina Perricone (@hubspot) on CodePen.

The HTML content division (div) element is a generic block-level container. Div elements help organize the code into clearly marked sections. They also add line breaks before and after their content. Otherwise, they do not affect the content or layout of the page unless styled with CSS.

Here’s an example of div wrapped around an image:

See the Pen div example 1 by Christina Perricone (@hubspot) on CodePen.

Here, the image looks the same as it did without the div wrapper element. That’s because no style information was given to this div element. To change the appearance of the container and therefore the image inside that container, you’d need to add style information.

Say, for example, you wanted to center the image. Then you could use the following code to horizontally center the image on the page:

See the Pen div example 2 by Christina Perricone (@hubspot) on CodePen.

The HTML span element is a generic inline container. Span tags do not inherently represent anything, but they are used to group phrasing content for two reasons.

The first is to apply styling to a piece of text. For example, if you’re creating drop caps, you can wrap the first letter of the opening paragraphs of each section of your article in span tags.

See the Pen span example by Christina Perricone (@hubspot) on CodePen.

The second reason to use span tags is to group elements that already share attribute values. For example, maybe you have a website for English speakers learning French. The default language is set to English but on several pages, you might have a table with French terms in the first column and their English translations in the second column. In that case, you can wrap the French terms in span tags with the language attribute set to “fr.”

The HTML anchor element creates a hyperlink. The anchor element requires an href attribute, which species the destination of the link. The destination can be another section on the same web page or another web page on the same site, or external websites, files, and email addresses.

Here’s an example of a link nested in a paragraph:

See the Pen anchor example by Christina Perricone (@hubspot) on CodePen.

The line break element creates a line break where it’s placed. That means you can add it wherever you want the text to end on the current line and resume on the next. This element can be used to display poems, song lyrics, or other forms of content in which the division of lines is significant.

Below is an example of an address rendered in two ways: one using line break elements and one using paragraph elements.

See the Pen Paragraph vs Line Break Element by HubSpot (@hubspot) on CodePen.

The HTML unordered list element is used for grouping items when the order doesn't matter. Shopping lists, for example, don’t need to follow a particular order. List items are defined by the

tag and wrapped in the

element.

Here’s an example of an unordered list. Try adding some list items yourself and see how the list changes.

See the Pen ul example by Christina Perricone (@hubspot) on CodePen.

The HTML ordered list element is used for grouping items when the order matters. Recipes, for example, should follow a particular order. The steps must be defined by the

• tag and then wrapped in the
  element.

  An ordered list will start at the number 1 by default. If you’d like to start at another number, add a start attribute and set the value to the number you want.

  Here’s an example of an ordered list that starts at 1. Try adding steps at different parts of the list:

  See the Pen ol example by Christina Perricone (@hubspot) on CodePen.

  The HTML emphasis element signals that the text inside it should be emphasized. Browsers typically render text inside tags in italics.

  Here’s an example of the emphasis wrapped around a paragraph and nested within a paragraph:

  See the Pen em example by Christina Perricone (@hubspot) on CodePen.

  The HTML strong element indicates that the text it contains is of particular importance or urgency. Browsers typically render the text in bold.

  See the Pen strong example by Christina Perricone (@hubspot) on CodePen.

  The

  element creates a table for organizing content. It requires three other HTML elements:

  Here's an example of a table:

  See the Pen Untitled by HubSpot (@hubspot) on CodePen.

  The horizontal rule element defines a horizontal line across a web page. It can be used to mark any thematic change, like the next scene in a play, a new section of an essay, or the conclusion of an article.

  See the Pen Horizontal Rule element by HubSpot (@hubspot) on CodePen.

  The select element defines a dropdown list of options, from which a user can select one option (or multiple if allowed). The select element is usually used in HTML forms for gathering user submissions. It’s best for selecting one option out of many while maximizing space on the web page.

  See the Pen HTML-only Dropdown by HubSpot (@hubspot) on CodePen.

  Attributes modify HTML elements in different ways. They can change the appearance of the element, apply unique identifiers so the elements can be targeted by CSS, or provide necessary information to readers or screen readers.

  Attributes usually appear lowercase and as name/value pairs, with their values in quotes.

  Below we’ll take a look at the most common attributes.

  The style attribute contains inline CSS. This CSS will override any styles set in the head section of the document or in an external stylesheet. It will only be applied to the HTML element that has the style attribute in its opening tag.

  Here’s an example of the attribute in HTML:

  The ID attribute is used to identify a single element in an HTML file. That means the value of an ID attribute should not be repeated inside the same file. Using this unique value, you can target a single element with internal or external CSS.

  Here’s an example of the attribute in HTML:

  The class attribute is used to identify a group of elements under the same name and customize that group, effectively creating a new group of elements.

  Bootstrap buttons, for example, are all labeled with the .btn class so they have the same basic style: 14px font, medium size, rounded edges, etc.

  Here’s an example of the attribute in HTML:

  As mentioned, the language attribute signals to screen readers what the primary language of the web page is and when they need to switch to another language. This is a small detail that can make your content more accessible to all readers, no matter what region they’re from or the language they speak.

  While this attribute is most commonly embedded in the HTML element, it can also be used with paragraph, div, span, and other elements.

  Here’s an example of the attribute in HTML:

  An href attribute contains the destination of a link. This attribute must always be included with an anchor element.

  Here’s an example of the href attribute in HTML:

  Just like an anchor element needs an href attribute, an image needs a source attribute. This contains the path to the image file or its URL.

  Here are two examples of the attribute in HTML:

  The alt attribute provides descriptive information about the HTML element. This is important for readers with visual impairments and for all readers in case the element doesn’t load. In that case, readers will still be able to glean what the element was meant to convey. Like the source attribute, you’ll most often find the alt attribute with the image element.

  Here’s an example of the attribute in HTML:

  The data-* attribute is used to store custom data that is private to the page or application. You can use this stored data in the document’s JavaScript to create a more dynamic experience for the user.

  The asterisk in the data-* attribute can be any value.

  Here’s an example of the attribute in HTML from W3Schools:

  I could then use this data in the JavaScript to trigger a pop-up message providing more information about each list item. Say, for example, a visitor clicked on the word “Owl.” Then a pop-up box would appear saying “The owl is a bird," as shown in the screenshot below.

  Now that we’ve covered the most common elements and attributes in HTML, let’s explore where you can practice writing this language and continue learning more about it.

  There are hundreds of resources available to learn HTML for beginners or more advanced developers. Depending on your learning style, you may prefer to read blog posts, watch video tutorials, take online courses, download an ebook, or use a combination of all of these resources.

  Below we’ll walk through at least one example of each of these content types. That way, no matter what type of learner you are, you can find a resource that will help you learn this language.

  If you're just starting to learn to code, this free e-book is designed to teach HTML for beginners. It will explain what HTML and CSS are, how they’re different, and how to get started if you're brand new to web development. As the title suggests, this guide is specifically designed for marketers who need to be able to make quick fixes to their websites, blogs, and landing pages.

  If you’re a visual learner, check out the online tutorials available at LinkedIn Learning (formerly known as Lynda.com). LinkedIn Learning offers 42 courses and over 5,000 video tutorials that cover virtually every HTML topic, from forms to semantic data to everything in between. These lessons are organized into three levels — beginner, intermediate, and advanced — so you can develop your skills over time. To get access to all content on the site, you can sign up for a monthly or annual subscription.

  The video below is an excerpt from one course called “HTML Essential Training” by Jen Simmons:

  If you’re overwhelmed by the sheer quantity of videos available on LinkedIn Learning, try Codeacdemy’s Learn HTML class. This online course will start with the basic structure and elements of HTML. You can then put your knowledge to the test by building out more complex elements and projects, including HTML tables and forms, from scratch.

  While you can complete most of the course for free, there are pro features like quizzes and projects that you’ll have to pay to unlock.

  W3C offers a range of training materials for HTML and CSS. While these tutorials aren't interactive, they're jammed-packed with information relevant to both beginner-level and advanced developers.

  Don't worry about the interactivity of the courses, as W3C provides a reference page that breaks down the material week by week. In week one you're learning the basics of HTML and its syntax then by week four you're off creating stylesheets and building full sections for your web page.

  Learn HTML is a free interactive tutorial. However, rather than try to be the most comprehensive resource on HTML, Learn HTML offers a short step-by-step guide for building out a web page. At every step, you can test whether you understood the lesson by completing an exercise in the online code editor. If your code matches the expected output, then you’ll get a success message and be invited to move onto the next lesson.

  HTML Dog created an HTML Beginner Tutorial for those who have absolutely no previous knowledge of HTML or CSS. It starts with a general overview of what HTML is and what it’s made of (tags, elements, and attributes). Then it walks through how to build out an HTML file with titles, paragraphs, headings, and other elements. By the end, you’ll have walked though how to create a complete HTML file.

  This is similar to W3Schools and Learn HTML — but it invites you to build out the HTML file in your editor of choice, instead of a built-in one. It specifically recommends Notepad.

  The HTML spec by W3C is the living standard for HTML. While it’s not the easiest introduction to the topic, it is the most comprehensive. That’s why we recommend checking it out once you’ve gone through some courses or tutorials and have established some familiarity with web technologies.

  HTML is the language we use to talk to computers. It is how browsers display text, images, paragraphs, and other elements on a web page.

  As such, HTML is the predominant language of the World Wide Web. That makes the language important not only to people trying to become programmers, but to marketers like yourself. Knowing the basics of this markup language will allow you to make changes to your website without needing to rely on a developer, saving you and your business time and money.

  -Complete Answer-
  [0]
  Edit
  Query
  Report
  
  Vipin brpbdl
  EXPEDITER CLERK
  
  
  
  
  Answer # 4 #
  A simple text editor is all you need to learn HTML.
  Web pages can be created and modified by using professional HTML editors.
  However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac).
  We believe that using a simple text editor is a good way to learn HTML.
  Follow the steps below to create your first web page with Notepad or TextEdit.
  Windows 8 or later:
  Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.
  Windows 7 or earlier:
  Open Start > Programs > Accessories > Notepad
  Open Finder > Applications > TextEdit
  Also change some preferences to get the application to save files correctly. In Preferences > Format > choose "Plain Text"
  Then under "Open and Save", check the box that says "Display HTML files as HTML code instead of formatted text".
  Then open a new document to place the code.
  Write or copy the following HTML code into Notepad:
  Save the file on your computer. Select File > Save as in the Notepad menu.
  Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred encoding for HTML files).
  Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose "Open with").
  The result will look much like this:
  With our free online editor, you can edit the HTML code and view the result in your browser.
  It is the perfect tool when you want to test code fast. It also has color coding and the ability to save and share code with others:
  Click on the "Try it Yourself" button to see how it works.
  If you want to create your own website and save your code online, try our free website builder, called W3schools Spaces:
  -Complete Answer-
  [0]
  Edit
  Query
  Report
  
  Tomoko Tanaka
  Barker
  
  
  
  
  Answer # 5 #
  • Step 1: Open Notepad (PC) Windows 8 or later: .
  • Step 1: Open TextEdit (Mac) Open Finder > Applications > TextEdit.
  • Step 2: Write Some HTML.
  • Step 3: Save the HTML Page.
  • Step 4: View the HTML Page in Your Browser.
  -Complete Answer-
  [0]
  Edit
  Query
  Report
  
  Amal Bangriwala
  SAILOR PLEASURE CRAFT
  
  
  
  

  Related Questions

  • How to i2c arduino?
  • How to convert gdb file to pdf?
  • How to event from iphone?
  • How to install qdz?
  • How to split xci files for fat32?
  • How to count csf on hemocytometer?
  • How to blj on switch?
  • How to present an abg?
  • How to send full movie in messenger?
  • How to explain dka to a child?

  More Questions

  • Is it legal to spin the article?
  • Why to invest in crm?
  • How is home first finance company ipo?
  • How to install apache in amazon linux ami?
  • How to bake potatoes in the oven?
  • How to fight kushala daora master rank?
  • What is srt treatment?
  • This vacation should I buy RENEE FAB 5 Matte Finish 5 in 1 Lipstick 7.5G [Review]?
  • What is gla good for?
  • Which freelance website is best for beginners?

  Contact

  • 
    Facebook
  • 
    Twitter
  • 
    Linkedin
  • 
    Message

  • Terms of use
  • Privacy Policy
  • Disclaimer
  • About us
  • DMCA
  • Blog

  All Rights Reserved © 2021 - 2025 Ask Sawal