Step by step html code

How to Create a Simple Web Page with HTML

This article was co-authored by wikiHow staff writer, Nicole Levine, MFA. Nicole Levine is a Technology Writer and Editor for wikiHow. She has more than 20 years of experience creating technical documentation and leading support teams at major web hosting and software companies. Nicole also holds an MFA in Creative Writing from Portland State University and teaches composition, fiction-writing, and zine-making at various institutions.

The wikiHow Tech Team also followed the article’s instructions and verified that they work.

This article has been viewed 4,543,027 times.

This wikiHow teaches you how to write a simple web page with HTML (hypertext markup language). HTML is one of the core components of the World Wide Web, making up the structure of web pages. Once you’ve created your web page, you can save it as an HTML document and view it in your web browser. Creating an HTML page is possible using basic text editors found on both Windows and Mac computers.

Adding a Head to Your HTML

Type in and press ↵ Enter . This tells the web browser that this is an HTML document. [1] X Research source

Type in and press ↵ Enter . This is the tag that opens your HTML head. The HTML head information that is not usually displayed on your web page. This information can include, the title, meta data, CSS style sheets, and other scripting languages. [2] X Research source

Type and press ↵ Enter . This is the tag to close your head. Your HTML code should look something like this.

 html> head> title>My Web Pagetitle> head> 

Adding a Body and Text to Your HTML

Type in below the closed «Head» tag. This tag opens the body of your HTML document. Everything that goes in the HTML body displays on the web page.

Type in . This is the tag to add a heading to your HTML document. A Heading is large bold text that typically goes at the top of your HTML document.

Add additional headings as you go. There are six different headings that you can create by using the through tags. These create headings of different sizes. For example, to create three different-sized headings in succession, you might write the following:

h1>Welcome to My Page!h1> h2>My name is Bob.h2> h3>I hope you like it here.h3> 

Type

. This is the tag to open a paragraph. Paragraph text is used to display normal sized text.

Type some text. This can be a description for your web page or any other information you wish to share.

Type

after your text and press ↵ Enter . This the tag to close your paragraph text. The following is an example of paragraph text in HTML:

• You can add multiple paragraph lines in a row in order to create a series of paragraphs under one heading.
• You can change the color of any text by framing the text with the and tags. Make sure to type your preferred color into the «color» section (you’ll keep the quotes). You can turn any text (e.g., headers) into a different color with this set of tags. For example, to turn a paragraph’s text blue, you would write the following code:

  Whales are majestic creatures.

• You can add bolds, italics and other text formats using HTML. The following are examples of how you can format text using HTML tags: [3] X Research source

b>Bold textb> i>Italic texti> u>Underlined textu> sub>Subscript textsub> sup>Superscript textsup> 

Источник

HTML beginner’s tutorial: Build a webpage from scratch with HTML

If you are a web dev novice and want to get started with the exciting world of web design, you’ve probably heard of HTML, which is the foundation of every web page online. Any successful web developer or designer must have a strong understanding of HTML.

Today, we will go through a beginner’s tutorial on HTML and build a web page step-by-step. Most web development tutorials talk about CSS and JavaScript right away, but we want to make sure you have a solid understanding of HTML before moving onto the next steps.

We will discuss the basics of HTML that you’ll use throughout your web dev career. No prerequisite knowledge of programming is required, but to be most successful with this article, a basic understanding of programming is helpful. For a quick introduction or refresher, check out The Absolute Beginner’s Guide to Programming.

Today we will cover:

Become a frontend developer for free.

The ideal place to start your journey as a front-end developer. With no prior knowledge needed, you will gain a mastery of HTML, CSS, and JavaScript.

What is HTML?

Hyper Text Markup Language (HTML) is the markup language we use to make webpages. It is the basis of every website that you encounter on the internet. Think of HTML as the bricks that you need to build anything for the web. Once we write our HTML code, we can add other languages to the page, such as CSS and JavaScript, to add interactivity, style, and more.

Imagine a document that you would create in a word processor. That document will usually use different font sizes to indicate sections of the text, such as headers, main content, footers, table of contents, etc. HTML is the process of building that document and setting the sizes of our text.

HTML provides a website’s structure and layout. We define that structure using various elements. But in order for a browser to appear how we want it, it must be explicitly told what each piece of content is. HTML is how we communicate and tell a computer how to render. The computer can interpret our HTML elements and translate them onto the screen.

Explore HTML on your own.

You can view the HTML source code of any website by right clicking on a rendered page and selecting “View Source”. This will open a page that details the HTML foundations of that site. Try it out with this article!

Key HTML terms and formatting

Now that we know what HTML is, let’s briefly introduce a few key terms before moving onto a step-by-step guide. You will use these basics throughout your entire web dev career!

Tags and elements

An element is an individual component of an HTML document that represents the semantics of that page. For example, the title element translates to the title of a page.

Semantics refers to the meaning of a particular element. Syntax refers to the structure of a programming language.

To create an element, we use tags. Think of these as descriptors for each piece of content you want on your page. Most tags are quite self-explanatory.

• : used to describe a paragraph

• : add an image
• : set the text to the largest size heading
• : an anchor will create a hyperlink to other HTML files

To use tags, we wrap the content between an opening and closing tag. The closing tag uses the forward slash / , while the opening tag does not. HTML tags are case not sensitive so is the same as

.

 
This is a paragraph element.
 

You can nest HTML elements when you want to apply multiple tags. Say you wanted to make a paragraph that is also bold. You could write the following HTML code:

Attributes and hyperlinks

HTML attributes provide additional information about our elements. Think of these like properties of an element. Attributes are placed in the opening tag, use the = sign, and wrap the attribute value in quotation marks » » .

Attributes can do all sorts of things to our elements such as embed images, add color, declare the language of a page, or add a title. For example, we can add color to our text using the following format.

Note: You can add color using Hex color codes (for specific colors) or one of the 140 text color names built-into HTML.

One of the most common uses of attribute is hyperlinking. We can connect any HTML page to another HTML page using an anchor tag. The href attribute will create a connection between the two sites.

Headings and lists

Headings are how we specify the difference between the main header and sub-headers. The HTML standard has six text heading elements, appropriately named h1 (the largest) through h6 (the smallest).

Note: Headers are used to represent text semantically. This is different than specifying font size. We use CSS to change font size.

• Unordered lists begins with the
  tag and the nested
  • tags for teach item.
  • Ordered lists begins with the
    tag and the nested
  • tags for teach item.

  Add images: tag

  We can add images to our webpage using the tag. We need to add a src attribute that contains a file path to that image. You will also include an alt attribute, which provides an alternative text description in case the image does not load.

  In the example below, we also defined two class attributes. The class attribute is used to identify specific elements with an identifier. This makes it possible to use an elements in a later part of our code. An element can have multiple class values, such as a title and a caption, as we use below.

  Note: The image tag does not use a closing tag.

  HTML tables

  We can add tables to a webpage by translating a table’s data into row and columns. Each row/column pair will have a piece of data associated with it called a table cell. So, how do we build a table in HTML?

   
   
  Column 1
   
  Column 2
   
  Column 3
   
   
   

  Take a look at this example below, but note that the table is not stylized at all. It will only list the data as it is provided. If we want to add style to the table (background color, padding, borders, etc.), we must use the language CSS.

  Formatting an HTML document

  Now that we know the terms of HTML, let’s discuss the basics of formatting. We will look at a basic HTML file before discussing each part below.

  The first line, , is called the doctype declaration. This indicates to browser what HTML version the file is written in. This file indicates that it is written in HTML5.

  On the second line, we write the opening tag to indicate the root element. From there, we branch off into other elements in a tree-like structure. To properly define an HTML file, we must place and elements within that root.

  • The element contains supporting information about the file. We call this metadata. There must be a to providing a title to the page directly underneath the element.
  • The element contains the main content of our file that will be rendered by a browser. There can be only one element. Most of the HTML code you write will exist here.
  • Within the body element, we then branch off to our highest-level heading and a paragraph

    .

  As you can see from this example, some elements are inline while others are block-level. Block-level HTML elements take the full width of a webpage and start on a new line. Some of these elements include headings, lists, and paragraphs. Inline elements do not take the full width and are in-line with text content. Some examples include anchors, images, and bolded text.

  Источник

  Читайте также:  Http response example php