How To Make A Website Html

Download Article

This wikiHow teaches you how to write a simple web page with HTML (hypertext markup language). HTML is one of the cadre components of the Www, making upward the structure of spider web pages. Once you've created your web page, yous can salve information technology as an HTML document and view information technology in your web browser. Creating an HTML page is possible using basic text editors found on both Windows and Mac computers.

1
Open up a text editor. On a computer running the Windows operating system, you'll usually use Notepad, or Notepad++ whereas macOS users will utilize TextEdit and ChromeOS users volition apply Text:
- Windows - Open Starting time , type in notepad, or notepad++ and click Notepad or "Notepad++ or sublime" at the top of the window.
- macOS - Click Spotlight , type in textedit, and double-click TextEdit at the top of the results.
- ChromeOS - Open launcher, and so click Text. (The icon says Code Pad).
two

Type in <!DOCTYPE html> and press ↵ Enter . This tells the web browser that this is an HTML certificate.^[i]

Advertisement
3

Type <html> and press ↵ Enter . This opening tag for your HTML code.
four

Type in <head> and printing ↵ Enter . This is the tag that opens your HTML caput. The HTML head information that is not unremarkably displayed on your web page. This data can include, the title, meta data, CSS style sheets, and other scripting languages. ^[2]
5

Blazon in <title>. This is the tag to add together a championship to your page.
six

Type a title for your spider web folio. This tin be whatever championship you lot want to name your web page.
7

Type in </championship> and printing ↵ Enter . This is the tag to close your title tag.

viii

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

                                            <!DOCTYPE html>                      <                      html                      >                      <                      head                      >                      <                      championship                      >My Web Page</                      championship                      >                      </                      head                      >

Advertising

1

Type in <body> below the airtight "Caput" tag. This tag opens the torso of your HTML document. Everything that goes in the HTML body displays on the web page.
2

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

Type a heading for your page. This tin be the title of your page or a greeting.

Type </h1> afterwards your heading text and press ↵ Enter . This tag closes your heading.

Add together additional headings as you lot go. There are six different headings that you tin can create by using the <h1></h1> through <h6></h6> tags. These create headings of different sizes. For instance, to create three different-sized headings in succession, you might write the following:

                                                    <                          h1                          >Welcome to My Folio!</                          h1                          >                          <                          h2                          >My name is Bob.</                          h2                          >                          <                          h3                          >I hope you similar it here.</                          h3                          >

The headings shows the priority or importance of the text. But its non necessary to use a higher heading if yous want to use any lower heading. One tin can directly utilize H3, even if at that place is no H1 in your post.

v

Type <p>. This is the tag to open a paragraph. Paragraph text is used to brandish normal sized text.
half-dozen

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

Type </p> after your text and press ↵ Enter . This the tag to shut your paragraph text. The following is an example of paragraph text in HTML:

                                            <                      p                      >This is my paragraph.</                      p                      >

Y'all tin add multiple paragraph lines in a row in order to create a serial of paragraphs under one heading.
Y'all tin modify the colour of any text by framing the text with the <font colour="color"> and </font> tags. Make certain to type your preferred color into the "color" section (you'll keep the quotes). You can turn any text (e.g., headers) into a unlike color with this fix of tags. For example, to turn a paragraph's text bluish, you would write the following code: <p><font color="blue">Whales are majestic creatures.</font></p>

You can add bolds, italics and other text formats using HTML. The following are examples of how y'all can format text using HTML tags:^[3]

                                                    <                          b                          >Bold text</                          b                          >                          <                          i                          >Italic text</                          i                          >                          <                          u                          >Underlined text</                          u                          >                          <                          sub                          >Subscript text</                          sub                          >                          <                          sup                          >Superscript text</                          sup                          >

If you lot employ bold and italic text for accent, not just for styling, use the <strong> and <em> elements instead of <b> and <i>. This makes your spider web page easier to understand when using technologies like a screen reader^[4] or the reader mode provided in some browsers^[5].

Add together a picture to your page. Yous can add an paradigm to your HTML using the following steps:

Type <img src= to open your image tag.
Copy and paste the image URL subsequently the "=" sign in quotation marks.

Type > after the image url to close your image tag. For case, if the prototype's URL is "http://world wide web.mypicture.com/lake", you would write the following:

                                                    <                          img                          src                          =                          "http://www.mypicture.com/lake.jpg"                          >

Link to another page. You tin add a link to your HTML using the post-obit steps:

Blazon <a href= to open your link tag.
Re-create and paste URL after the "=" sign in quotation marks.
Type > afterward the URL to close the link portion of the HTML.
Type a name for the link later on the endmost bracket.

Type </a> afterwards the link proper name to close the HTML link.^{[half dozen]} The post-obit is an example of a link to Facebook.

                                                    <                          a                          href                          =                          "https://www.facebook.com"                          >Facebook</                          a                          >.

3

Add a line break to your HTML. You lot can add a line break by typing <br> to your HTML. This creates a horizontal line that can be used to divide dissimilar sections of your folio.

Advertisement

one

Bank check out the list of official HTML colour names and codes. The Earth Wide Web Consortium (W3C) manages an official listing of colors that you'll detect at https://www.w3.org/wiki/CSS/Properties/color/keywords. Each color has an official proper name, 6-digit hexadecimal lawmaking, and a decimal value. You tin can use any of these values to add colour to elements of your webpage. For this case, we'll use the official colour names.
2
Set the background color in the <body> tag. You'll be doing this by calculation the fashion attribute to the tag. Allow's say you wanted to make the background colour of the entire page lavander:
- <torso style="background-color:lavender;">
iii
Set up the text color for any tag. You can also apply the style attribute to specify which color you'd like all text within a particular tag to exist. For instance, allow's say you lot wanted to make the text in i of your <p> tags midnightblue:
- <p style="color:midnightblue;">
- The color change will just affect the text inside that <p> tag. If you start some other <p> tag later that should likewise be midnightblue, y'all'll need to set up the style attribute there equally well.
4
Fix the groundwork colour for a header or paragraph. Similar to how you gear up the background colour for the body tag, you lot can as well set groundwork colors for other tags. Permit's say you wanted to make the background colour of an <p> lightgrey, and the background color of an H1-fashion header lightskyblue, yous'd use:
- <p style="background-color:lightgrey;">
- <h1 style="background-colour:lightskyblue;">
Advertisement

1

Type </torso> to shut your body. Later you lot have finished adding all your text, images and other elements to the torso of your HTML certificate, add this tag at the bottom of your HTML document to close the body of your HTML certificate.

Type </html> to shut your HTML document. This tag goes below the tag to close your HTML trunk at the finish of your HTML certificate. This tells the spider web browser there is no more HTML code afterwards this tag. Your entire HTML document should look something like this:

                                            <!DOCTYPE html>                      <                      html                      >                      <                      head                      >                      <                      title                      >wikiHow Fan Page</                      title                      >                      </                      head                      >                      <                      torso                      >                      <                      h1                      >Welcome to My Page!</                      h1                      >                      <                      p                      >This is a fan folio for wikiHow. Make yourself at home!</                      p                      >                      <                      h2                      >Important Dates</                      h2                      >                      <                      p                      ><                      i                      >January xv, 2019</                      i                      >                      - wikiHow'southward Birthday</                      p                      >                      <                      h2                      >Links</                      h2                      >                      <                      p                      >Hither is a link to wikiHow:                      <                      a                      href                      =                      "http://world wide web.wikihow.com"                      >wikiHow</                      a                      ></                      p                      >                      </                      body                      >                      </                      html                      >

Advertising

i
Convert your document to plain text (Mac users only). Click the Format card item at the top of the screen, then click Make Patently Text in the resulting drop-downward card.
- This step is neither necessary nor possible on Windows.
two

Click File . Information technology's in the menu bar at the pinnacle of the screen.
3
Click Save every bit . It's in the drop-down card below "File".
- Alternatively, you can printing Ctrl+S (Windows) or ⌘ Command+S (Mac) to exercise so.
4

Enter a proper noun for your HTML document. Type whatever you want to name your document into the "File name" (Windows) or "Name" (Mac) text box.
five
Change the document'due south file type. You lot'll need to change the document from a text file to an HTML file. Use the following steps to change the file type:
- Windows - Click the "Relieve as type" drop-down box, click All Files, and then blazon .html at the end of the file'south name.
- MacOS - Supplant the .txt at the cease of the file's name with .html instead.
- ChromeOS - Click the "Salvage as" push button. Name the file with .html at the end. The beginning is up to you.
6
Click Relieve . Information technology's at the bottom of the window. Doing so volition create an HTML file.
- HTML files typically open with your default web browser.
7

Close your text editor. At this point, you're ready to open your HTML file in your browser and so that you tin can view your web page.
8
Open up the HTML document with your browser. In near cases, yous'll be able to double-click the HTML document to do this. If double-clicking the document results in an error, exercise the post-obit:
- Windows - Right-click the document, select Open with, and click your preferred browser.
- Mac - Click the document once, click File, select Open With, and click your preferred browser.
9
Edit the HTML document if needed. Yous may notice an error in your HTML page. To change it, you can edit the HTML document's text:
- On Windows, yous can right-click the certificate and click Edit in the resulting drop-downward bill of fare (if you have Notepad++ installed, this will say Edit with Notepad++ instead).
- On Mac, you lot'll desire to click the certificate to select it, click File, select Open With, and click TextEdit. You lot can also drag the document into TextEdit.
- On Chromebook, shut the Text app, open up Files, find your file, and then click on it.
Ad

Sample HTML

Add New Question

Question

How practice I upload my webpage and make information technology public?

Yous tin prepare your own server, but I recommend buying spider web hosting from some of the available hosting companies. There are also gratis hosts out there, but they would put their ads on your webpage.
Question

Can I create a web page using Notepad?

Yep. Write the code and then printing edit-save and and so phone call information technology what ever you desire. Subsequently you lot called it something, y'all have to blazon .html at he stop. Save and employ as needed.
Question

Can I create an interactive design of a website using only HTML?

Aye, you tin can put some pictures on there and a groundwork too.
Question

How exactly practice I become the HTML information on a tab?

After you lot change the file type to .html and open it, It should automatically plough into a tab.
Question

Can I test the effects of a spider web folio without the internet?

Yeah, you tin can edit as well equally see your md on the browser without whatever network.
Question

Is there an app bachelor to guide me in creating a web page?

There's the mobile app "Larn HTML," equally well equally "Learn CSS" and "Learn JavaScript," all from Sololearn. Combine them all to create a overnice HTML webpage. If you aren't looking for mobile apps but for websites, you tin get to codecademy.com, or just search in Google for websites that volition teach you lot programming languages.
Question

How do I modify the font size?

Apply CSS. CSS is used to determine how an HTML certificate looks. To insert CSS into an HTML document, type ". ". To change the font size in CSS, type the tag you desire to edit (p, h1, body etc) followed by a {. After the {, blazon: font-size: ...px; (the semicolon is very important!) then add a } at the finish.
Question

How do I pick an prototype from my computer instead of online?

Provide the verbal path. For case, if your image is called face up.jpg, type "C:\\Users\(your username)\Desktop\face.jpg."
Question

How can I salvage a file on Notepad that will give me a webpage view?

You can save information technology by pressing cntrl+s. After yous've proper noun the file, save information technology as .html.
Question

How practice I link one HTML page with another HTML folio?

Yous can create a link from one page to another using the "" tag. This tag has an important parameter "href", which contains the address.

Show more than answers

Inquire a Question

200 characters left

Include your electronic mail address to get a message when this question is answered.

Submit

Advertising

Video

Tags should always be closed in a mirror image of their open counterparts. For example, <tag1><tag2> should exist closed equally </tag2></tag1>.
You lot can add side-scrolling text to your website using the <marquee></marquee> tag, only keep in mind that this tag might not be recognized past some browsers.
If you want to center an paradigm in your page, you can type <class="center"> after the image's name in the img tag (for example, <img src="URL" form="center">).

Advertizing

Information technology'south best to host your ain images on Imgur or like if yous plan on uploading images to your web folio. Posting other people's pictures may result in copyright infringement.

Advert

Near This Commodity

Article Summary X

ane. Open a text editor.
2. Type ″<!DOCTYPE html>″ on the starting time line.
3. Type ″<html>″ on the next line.
4. Type ″<head>″ on the next line.
5. Type your page's title between ″<title>″ and ″</title>″ tags.
half-dozen. Type ″</caput>″ on the next line.
7. Type ″<trunk>″ on the side by side line.
eight. Enter the content of your folio.
ix. End the folio with ″</body></html>″

Did this summary help you?

Thanks to all authors for creating a page that has been read 4,234,521 times.