Adding a Head to Your HTML
Open a text editor. On a computer running the Windows operating system, you'll usually use Notepad, or Notepad++ whereas macOS users will use TextEdit and ChromeOS users will use Text: Windows - Open Start Windows Start, type in notepad, or notepad++ and click Notepad or "Notepad++ or sublime" at the top of the window. macOS - Click Spotlight Mac Spotlight, type in textedit, and double-click TextEdit at the top of the results. ChromeOS - Open launcher, then click Text. (The icon says Code Pad).
Type in and press ↵ Enter. This tells the web browser that this is an HTML document.
Type and press ↵ Enter. This is the opening tag for your HTML code.
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.
Type in
Type and press ↵ Enter. This is the tag to close your head. Your HTML code should look something like this.
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.
Type a heading for your page. This can be the title of your page or a greeting.
Type after your heading text and press ↵ Enter. This tag closes your heading. 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:Welcome to My Page!
My name is Bob.
I hope you like it here.
The headings shows the priority or importance of the text. But its not necessary to use a higher heading if you want to use any lower heading. One can directly use H3, even if there is no H1 in your post.
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:This is my paragraph.
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: Bold text Italic text Underlined text Subscript text Superscript text If you use bold and italic text for emphasis, not just for styling, use the and elements instead of and . This makes your web page easier to understand when using technologies like a screen reader or the reader mode provided in some browsers.Adding Additional Elements to Your HTML
Add a picture to your page. You can add an image to your HTML using the following steps:
Type
Link to another page. You can add a link to your HTML using the following steps: Type Facebook.
Add a line break to your HTML. You can add a line break by typing
to your HTML. This creates a horizontal line that can be used to divide different sections of your page.
Customizing Colors
Check out the list of official HTML color names and codes. The World Wide Web Consortium (W3C) manages an official list of colors that you'll find at https://www.w3.org/wiki/CSS/Properties/color/keywords. Each color has an official name, 6-digit hexadecimal code, and a decimal value. You can use any of these values to add color to elements of your webpage. For this example, we'll use the official color names.
Set the background color in the
tag. You'll be doing this by adding the style attribute to the tag. Let's say you wanted to make the background color of the entire page lavender:
Set the text color for any tag. You can also use the style attribute to specify which color you'd like all text within a particular tag to be. For example, let's say you wanted to make the text in one of your
tags midnightblue:
The color change will only affect the text within that
tag. If you start another
tag later that should also be midnightblue, you'll need to set the style attribute there as well.
Set the background color for a header or paragraph. Similar to how you set the background color for the body tag, you can also set background colors for other tags. Let's say you wanted to make the background color of an
lightgrey, and the background color of an H1-style header lightskyblue, you'd use:
Closing Your HTML Document
Type to close your body. After you have finished adding all your text, images and other elements to the body of your HTML document, add this tag at the bottom of your HTML document to close the body of your HTML document.
Type to close your HTML document. This tag goes below the tag to close your HTML body at the end of your HTML document. This tells the web browser there is no more HTML code after this tag. Your entire HTML document should look something like this:
Welcome to My Page!
This is a fan page for wikiHow. Make yourself at home!
Important Dates
January 15, 2019 - wikiHow's Birthday
Links
Here is a link to wikiHow: wikiHow
Saving and Opening Your Web Page
Convert your document to plain text (Mac users only). Click the Format menu item at the top of the screen, then click Make Plain Text in the resulting drop-down menu. This step is neither necessary nor possible on Windows.
Click File. It's in the menu bar at the top of the screen.
Click Save as. It's in the drop-down menu below "File". Alternatively, you can press Ctrl+S (Windows) or ⌘ Command+S (Mac) to do so.
Enter a name for your HTML document. Type whatever you want to name your document into the "File name" (Windows) or "Name" (Mac) text box.
Change the document's file type. You'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 "Save as type" drop-down box, click All Files, and then type .html at the end of the file's name. MacOS - Replace the .txt at the end of the file's name with .html instead. ChromeOS - Click the "Save as" button. Name the file with .html at the end. The beginning is up to you.
Click Save. It's at the bottom of the window. Doing so will create an HTML file. HTML files typically open with your default web browser.
Close your text editor. At this point, you're ready to open your HTML file in your browser so that you can view your web page.
Open the HTML document with your browser. In most cases, you'll be able to double-click the HTML document to do this. If double-clicking the document results in an error, do the following: 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.
Edit the HTML document if needed. You may notice an error in your HTML page. To change it, you can edit the HTML document's text: On Windows, you can right-click the document and click Edit in the resulting drop-down menu (if you have Notepad++ installed, this will say Edit with Notepad++ instead). On Mac, you'll want to click the document to select it, click File, select Open With, and click TextEdit. You can also drag the document into TextEdit. On Chromebook, close the Text app, open Files, find your file, and then click on it.
Comments
0 comment