How to create an HTML page

Author: Florence Bailey
Date Of Creation: 20 March 2021
Update Date: 14 May 2024
Anonim
HTML Tutorial - How to Make a Super Simple Website
Video: HTML Tutorial - How to Make a Super Simple Website

Content

HTML (Hypertext Markup Language) is the primary programming language for developing web pages. Created as a simple and convenient programming language. Most of the pages on the Internet have been developed using one of the forms of this language (ColdFusion, XML, XSLT). After reading this article, you can continue your training using other resources on the Internet. Try to search the internet for other articles related to this topic.

Steps

Method 1 of 1: Writing an HTML Page

  1. 1 Before you begin to familiarize yourself with one of the steps presented here, see the “What You Will Need” section.
  2. 2 What you should know before you start to understand this issue:
  3. 3 The basics. Have you ever heard of the tag? The tag is surrounded by angle brackets, with the word inside. The end tag is written in the same form, but with the addition of a slash after the first angle bracket. An attribute is an optional word in a tag that is used to add details to a tag.
  4. 4 The beginning of the document. In whatever text editor you are using, paste in the following:
    html> head> title> wikiHow / title> / head> body> Hello World / body> / html> big> / big>
    The tag must be closed with the same tag, but with a slash after the first angle bracket. There are exceptions such as tags META or DOCTYPE.
  5. 5 DOCTYPE
    • Typically, most web pages are set DOCTYPE ”. This helps determine the encoding as well as how it will be perceived by web browsers. Most pages will work without it, “but this is necessary if you want to match (They regulate the types of encodings on the Internet and how they are used)... The DOCTYPE for HTML 4.01 is presented below:! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> This is one of the most common DOCTYPE used on pages all over the internet.First, it points to the type of the page describing the ‘html’, then it highlights the type of encoding, and finally, the location of the DOCTYPE, which as a result, describes the page for the web browser.
    • There are different types of HTML (Different versions developed over the years), for example using new tags, or specific tags. Some tags are deprecated (other more useful tags are used instead).
    • b> and i> - this is what is currently imposed on tags, because they are used to transform text, but not specifications, as a result, other tags come to replace them. Tag strong> is a replacement for b>, and em>, a replacement for i>.
    • It is important that the previous tags are replaced with tags that are more than formatting. If the text is translated, then not only the formatting, but also its meaning remains the same. This is semantically correct.
    • In XHTML version 2.0, the b> and i> not used, just like in HTML version 3+.
  6. 6 HTML "Encapsulation Rule".
    • Let's take a look at the more important tags currently in use. During the creation of the page, a simple structure is used. If a tag was opened, then as a result, it should be closed... This applies to the entire structure. Here's a valid example of the XHTML layout structure:
    • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    • html xmlns = "http://www.w3.org/1999/xhtml">
    • head>
    • meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
    • title> Hello World! / title>
    • / head>
    • body>
    • h1> Hello World! / h1>
    • / body>
    • / html>
    • Sample code that issues a message Hello world... This is called a test Hello world.
  7. 7 Heading
    • The web page title is the content between the tag head>... This content cannot be viewed by the user (only the title that appears in the page title). Information between tags head>, can enclose other tags, such as:

      • The META tag is used for information that is useful to search engines and other utilities.
      • LINK tag that creates a link between documents, for example for Styles (CSS).
      • SCRIPT tag, this includes almost any web coding, with the ability to remotely access (from another document).
      • The STYLE tag, which is essentially a style that can be applied to a page.
      • The TITLE tag is the title that appears as the title of a page in your web browser.
    • Let's see a demo of some of these in an example header taken from this website (it has been shortened):
      • head>
      • title> ... / title>
      • meta name = "description" content = "..." />
      • link rel = "stylesheet" type = "text / css" href = "..." />
      • meta http-equiv = "content-type" content = "text / html; charset = UTF-8" />
      • style type = "text / css" media = "all"> ... / style>
      • script type = "text / javascript" src = "..."> / script>
      • / head>

        In case you haven't noticed, the individual tags have been highlighted, with the actual information removed. The example is rather short, showing almost every tag that can be found in head>except for HTML comment (We'll talk about this in simple tags).
  8. 8 Simple tags everywhere
    • Let's move on and see other tags. Be careful with your tagging and remember the rule of thumb, "Encapsulation."

      • strong> Emphasizes important text.
      • small> Makes text smaller. Font size is measured in standard units from 1 to 7, 3 is the default text size. ...
      • pre> Defines a block of rich text. As it is correct, such text is typed in a font of the same size and with all spaces between words.
      • em> Shows text as a phrase.
      • del> Strikes out text.
      • ins> Defines the text that has been inserted into the document.
      • h1> One of many heading tags. Tags of this kind start with ‘h’, with a numerical difference. Make sure to close the tag with the same number.
      • p> Defines a paragraph.
      • ! --- ... ---> Unlike other tags, the comment must be inside the tag itself. This information is only visible when the code is viewed.
      • blockquote> Shows a quote, can be used with the cite> tag.
      • The few examples above are not a complete list of existing tags. To find out about others, visit.
  9. 9 Creating a clear structure
    • Pages are designed to hold data in simple sets of tags so that we can parse the information into paragraphs. The computer recognizes data; it does not know about context or conceptual connection. We have to create computer-friendly HTML pages. This is achieved by using the div tag. It helps to create a huge number of pages. It can be styled with CSS and is easier than creating large code tables for the layout.
      • div> This tag is special because it can be styled and use separate blocks of information that both the user and the computer can understand.
    • Let's take a look at a simple HTML layout that uses a div tag.
      • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      • html xmlns = "http://www.w3.org/1999/xhtml">
      • head>
      • meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
      • title> Hello World! / title>
      • / head>
      • body>
      • h1> Hello World! / h1>
      • div id = "contentOne">
      • p> This is some text in div # contentOne. / p>
      • div>
      • p> A paragraph in a sub-section of div # contentOne / p>
      • / div>
      • / div>
      • / body>
      • / html>
    • Using div> tags helps with finding and modifying styles while working with CSS and Javascript. HTML will use different encoding to work with CSS styles and Javascript to create a better and more responsive user experience.

Tips

  • After reading this article, do not stop and think that you have learned everything you need to know. There is always something to learn, especially in this technology.
  • Learn, understand, and write code.
  • Note that some tags only use>. Para and br are some examples. Other tags opened with> need to be closed further. For example, "div> / div>".
  • People are expecting new discoveries, so reinvent, design, or code.
  • Once you've learned a lot, try learning server programming.
  • Learn to work with CSS as well as Javascript.

Warnings

  • Remember, HTML is all about editing content. This means that HTML is only used to store content in a recognized format. Other changes must be done using other technologies, such as CSS. It also means doing “Semantically correcteven if others don't admit it. Other programming languages ​​help build web pages (CSS, Javascript, and XML). HTML is a content constructor.

What do you need

  • A text editor that supports ANSI encoding
  • A web browser such as Internet Explorer or Mozilla Firefox
  • (Optional) wysiwyg or wykiwyg HTML editor such as Adobe Dreamweaver, Aptana Studio, or Microsoft Expression Web