HTML for greens - HTML
Questions and answers
Below you will find a list of the most frequently asked questions from this chapter with concise answers and ready-to-use HTML code examples. To check a more detailed description, click the "See more..." link. below the selected answer.
Which HTML editor to choose: Pajączek, CoreEditor, Bluefish, Brackets, PSPad, gedit, Kate, Quanta Plus, SCREEM, Smultron?
What is HTML and what is it used for?
HTML is short for Hypertext Markup Language. It is a computer language used to create web pages. An HTML document is a text file in which you enter all the commands for text formatting, inserting graphics, and more.
How to edit a page in HTML?
To edit HTML pages, it's best to use a specialized editor. There are many free and paid HTML editors available for different operating systems: Windows, Linux, Mac OS X.
Which program to use for writing HTML code?
For writing HTML code, it's best to use a dedicated editor. There are many free and paid HTML editors available for different operating systems. For example: Pajączek, CoreEditor, Bluefish, Brackets, PSPad, gedit, Kate, Quanta Plus, SCREEM, Smultron.
Which HTML editor?
Brackets is one of the best HTML editors. It has a range of built-in features useful for creating web pages. It supports installing free extensions that can further enhance its capabilities. It is completely free and available in versions for every operating system.
How to convert text to HTML?
Many text editors, such as Microsoft Word, Open Office, or Libre Office, have the ability to convert a document to HTML code. To do this, simply use the menu: "File / Save As..." and then, in the "Save as type" field, choose "Web Page, Filtered (*.htm;*.html)" or "HTML Document (Writer) (*.html)" as appropriate. Finally, click the "Save" button. However, it should be noted that documents created in this way may take a long time to load and display incorrectly in some browsers, and they may be difficult to modify later. Therefore, it is recommended to use dedicated HTML editors for creating this type of documents.
How to open an HTML file in Word?
Text editors such as Microsoft Word, Open Office, or Libre Office allow you to directly open and edit HTML files. To do this, select the menu: "File / Open" and then locate the *.html or *.htm document on your disk and click the "Open" button. However, it's important to remember that modifying an HTML document in this way may result in longer loading times and incorrect display in some browsers. Therefore, it's recommended to use dedicated HTML editors for creating this type of documents.
What does a typical HTML document look like? What are subpages?
What is the structure of an HTML document?
An HTML document consists of a header section <head>...</head> and the actual body of the document <body>...</body>. In the header, you can include the title and description of the page. The body of the document contains text and other elements that will be displayed in the browser window.
What sections make up an HTML document?
An HTML document consists of a header section <head>...</head> and the body of the document <body>...</body>.
How to set diacritic characters in HTML?
To ensure correct display of diacritic characters, you should insert a character set declaration in the document's header: <meta charset="utf-8">. Additionally, it is necessary to use the appropriate HTML editor.
How to create subpages in HTML?
Websites typically consist of multiple subpages. To create a subpage, open any HTML editor and create a new file in the same way you would when creating the main page of the website. Then, input the appropriate content and save the file on your disk with the extension *.html or *.htm.
How to open an HTML file in a browser?
There are two ways to open an HTML file in a web browser. The first method is to use the appropriate keyboard shortcut in the web browser (in Windows, it would be Ctrl+O), and then, in the dialog box, locate the file on your disk and click the "Open" button. The second method is to locate the HTML file on your disk using the built-in file explorer in the operating system, and then double-click its name - this will open the file in the default web browser.
How do you enter text on Web pages? What are the rules for correct typing of punctuation marks in computer text?
How to put text on a website?
To add plain text to a website, simply type it in the HTML document's body - that is, within the <body>...</body> section - using any HTML editor.
How to add text to a page?
To add plain text to an existing web page, open the chosen *.html file in an HTML editor. Then, find the location in the document where the new text should be added - it should be somewhere inside the <body>...</body> section. You can simply type or paste the text from the system clipboard using the keyboard shortcut Ctrl+V (on Windows). Finally, save the modified *.html file using the keyboard shortcut Ctrl+S.
What are HTML tags?
What are tags?
A tag is a special text enclosed in angle brackets. It is a part of the HTML language syntax and allows you to control the appearance of a webpage. There are opening and closing tags. At the beginning of a closing tag, there is always a forward slash character "/".
What are tags used for?
HTML tags are used for formatting text and inserting additional elements on a webpage.
How to insert special characters in HTML?
Because the characters: "<" (less than sign) and ">" (greater than sign) are reserved for tags, they should not appear in the normal content of a webpage. If you need to use them, you should enter them as follows: < and >.
How do you move text to the next line in an HTML document?
How to end a line in HTML?
In the HTML language, pressing the Enter key will not cause the text to be displayed on a new line. To do that, you should use the <br> tag.
How to move to the next line in HTML?
Place the <br> tag where you want to end a line of text.
How to move text down in HTML?
To move text down by one line in HTML, insert the <br> tag before it.
How to put text below text in HTML?
To stack two lines of text one below the other, place the <br> tag between them.
How to arrange text on the screen? How to add a new paragraph? How to center or align text? What are HTML attributes?
How to create a paragraph in HTML?
To do this, place the text inside the <p>...</p> tag.
What is a paragraph in HTML?
A paragraph is another term for a paragraph - a visually and thematically distinct part of a longer text. This term is usually used in relation to legal regulations rather than regular text.
How to center text?
To align text in the center, you can add the appropriate attribute to the paragraph tag: <p style="text-align: center">...</p>.
How to justify text in HTML?
To align text to both margins simultaneously, you should add the appropriate attribute to the paragraph tag: <p style="text-align: justify">...</p>.
How to make text align to the right in HTML?
To align text to the right margin, you can add the appropriate attribute to the paragraph tag: <p style="text-align: right">...</p>.
How do I bold (embolden) text on a Web page?
How to make text bold?
To make text bold in HTML, simply enclose it within the <b>...</b> tag.
How to change the thickness of HTML text?
By default, text on a web page is written in a regular font. To make a portion of the text bold, just enclose it within the <b>...</b> tag, making it visually stand out.
How to italicize text on a web page (italics)?
How to make text italic in HTML?
To write text in italics in HTML - meaning with slanted or cursive font - simply enclose it within the <i>...</i> tags.
How to italicize text in HTML?
By default, text on a web page is written in a regular font. To italicize a portion of the text, just enclose it within the <i>...</i> tags. This is often used to indicate a technical term, idiom from another language, or a quoted text fragment.
How do you underline text on a Web page?
How to underline text in HTML?
To underline text in HTML, simply enclose it within the <u>...</u> tags.
How to add underlining in HTML?
By default, text on a web page is written in a regular font. To add underlining to a portion of the text, just enclose it within the <u>...</u> tags. This is often used to indicate unarticulated text or a spelling error.
How do I change the font size on a web page?
How to change the font size in HTML?
To do this, you need to enclose the text within a tag with an attribute set to an appropriate value: <span style="font-size: xx-small">...</span> (smallest font), <span style="font-size: x-small">...</span> (very small font), <span style="font-size: small">...</span> (small font), <span style="font-size: medium">...</span> (medium font), <span style="font-size: large">...</span> (large font), <span style="font-size: x-large">...</span> (very large font), <span style="font-size: xx-large">...</span> (largest font).
How to reduce the font size in HTML?
Regular text on a webpage is displayed in the default font size. To decrease it, you should enclose it within a tag with an attribute set to an appropriate value: <span style="font-size: x-small">...</span>, or if you want to significantly reduce the text size: <span style="font-size: xx-small">...</span>.
How do I change the font color on a web page?
How to change the font color in HTML?
To do this, you need to enclose the text within a tag with an attribute set to an appropriate value: <span style="color: black">...</span> (black), <span style="color: white">...</span> (white), <span style="color: silver">...</span> (silver), <span style="color: gray">...</span> (gray), <span style="color: maroon">...</span> (maroon), <span style="color: red">...</span> (red), <span style="color: purple">...</span> (purple), <span style="color: fuchsia">...</span> (fuchsia), <span style="color: green">...</span> (green), <span style="color: lime">...</span> (lime), <span style="color: olive">...</span> (olive), <span style="color: yellow">...</span> (yellow), <span style="color: navy">...</span> (navy), <span style="color: blue">...</span> (blue), <span style="color: teal">...</span> (teal), <span style="color: aqua">...</span> (aqua).
How to use colors in HTML?
One of the most common ways to use colors on web pages is by changing the text color. By default, all text will be written in black or, occasionally, white when a dark theme is set in the operating system or web browser. To change the text color to something else, you just need to enclose it within a tag with an attribute set to an appropriate value. For example: <span style="color: red">...</span> will change the text color to red.
How do I change the font type on a Web page?
What are the types of fonts?
The most popular types of fonts include: 'Times New Roman', Arial, 'Courier New', Verdana, Tahoma, 'Trebuchet MS', Georgia, Helvetica.
How to change the font family in HTML?
To do this, you need to enclose the text within a tag with an attribute set to an appropriate value - for example: <span style="font-family: Arial">...</span>, <span style="font-family: 'Courier New'">...</span>, <span style="font-family: 'Times New Roman'">...</span>, <span style="font-family: Verdana">...</span>.
How do you change the appearance of text on a web page?
How to make text bold and italic in HTML?
How to change the font size and color in HTML?
To do this, you need to enclose the text within a tag with attributes set to appropriate values. For example: <span style="font-size: large; color: red">...</span> will set a very large font size and a red text color.
How do I change the background color and text color on a web page?
How to change the background color and text color in HTML?
To change the default background color and text color for the entire page, it's best to add the appropriate attributes to the tag of the document's body. For example: <body style="background-color: black; color: white">...</body> will set a black background color and white text color. However, it's essential to remember that in an HTML file (e.g., *.html), there can be only one document body tag. Therefore, you add the relevant attribute to the existing tag rather than inserting a new one!
How to make a yellow background in HTML?
The background color on a web page should always be set together with a text color that provides adequate contrast. Otherwise, the user may change the default text color in their web browser, and it could become unreadable (e.g., white text on a yellow background). To set a yellow background and black text for the entire page, it's best to add the appropriate attributes to the tag of the document's body: <body style="background-color: yellow; color: black">...</body>. However, it's essential to remember that in an HTML file (e.g., *.html), there can be only one document body tag. Therefore, you add the relevant attribute to the existing tag rather than inserting a new one!
How do I insert an image (graphic, photo) into a Web page?
How to Insert an Image in HTML?
For example, if the file is named "image.jpg" and it's in the same directory on your computer as the HTML document you want to insert the image into, you can use the following tag: <img src="image.jpg" alt="Enter a brief description of the image here">. The text "Enter a brief description of the image here" won't normally appear on the page, but it's recommended not to omit it. It may be displayed if, for some reason, the browser can't display the image. It's also helpful for blind users who typically use special screen readers to access web pages.
Why Is My Image Not Displaying in HTML?
The most common reasons for images not displaying on a web page are typos in the image file names or incorrectly constructed access paths. Another reason may be omitting the file extension. Even though some operating systems (e.g., Windows) may hide file name extensions, you should always provide it when inserting an image on a web page. Images may also fail to display due to the use of forbidden characters in the file name, such as diacritical Polish characters or spaces. It's also recommended not to use uppercase letters.
How do I determine the alignment of an image (graphic, photo) on a Web page?
How to Move an Image to the Left in HTML?
To align an image to the left side of the text in HTML, you need to add an attribute with the appropriate value to its tag: <img src="image.jpg" alt="Enter a brief image description here" style="float: left">.
How to Insert an Image on the Right in HTML?
To align an image to the right side of the text in HTML, you need to add an attribute with the appropriate value to its tag: <img src="image.jpg" alt="Enter a brief image description here" style="float: right">.
How do I position an image (graphic, photo) or other elements in the center of the screen (centering)?
How to Center an Image in HTML?
The easiest way to place an image in the center of a web page is to insert it inside a tag with an attribute set to the appropriate value: <div style="text-align: center"><img src="image.jpg" alt="Enter a brief image description here"></div>.
How to Center an Image and Text in HTML?
To center both the image and text in HTML, you can place both of them inside a tag with an attribute set to the appropriate value: <div style="text-align: center"><img src="image.jpg" alt="Enter a brief image description here"><br> Enter the caption for the image here</div>. It's a good practice to insert a line break between the image and the text. Otherwise, if the image is too narrow, the first line of text might appear next to the image, rather than below it.
What are links (hyperlinks, hypertext links) used for?
What is an online link called?
An online link is also called a hyperlink, hypertext reference, or more informally, a link. Clicking on it automatically takes you to a new page it points to.
How to Create a Link to an HTML Subpage?
For example, if the file of the subpage is named "contact.html" and it's located in the same folder on your computer's disk as the *.html document in which you want to insert the link, you can use the following tag: <a href="contact.html">...</a>.
Why Doesn't the Link Work?
The most common reason for a non-functional link on a website is typographical errors in the file name of the link's subpage or an incorrectly constructed path [see: Inserting an Image]. Another reason might be omitting the file extension, either *.html or *.htm. Although in some operating systems (e.g., Windows) file extensions may be hidden, when inserting a link to a subpage, you always need to specify it. The link might not work if the file name of the subpage includes forbidden characters, such as diacritical Polish letters or spaces. It is also recommended not to use capital letters. If the link doesn't work at all, it might be due to a typographical error in the tag name or attribute - it should be written correctly, for example: <a href="subpage.html">...</a>.
How to insert a link (hyperlink, hypertext link) in a Web page?
How to Create a Link to a Website?
For example, to insert a link to Google, you should use the following code: <a href="https://www.google.com/">Go to Google</a>.
Why Doesn't the Internet Link Work?
Probably, at the beginning of the link's address, "https://" or "http://" is missing. It should look like this, for example: <a href="https://www.google.com/">Go to Google</a>. A less common reason may be using "https://" when the linked page only supports "http://". The first type is safer for the user because it provides an encrypted connection, but if it doesn't work, you need to use the second type.
How to Open a Link in a New HTML Tab?
To do this, you need to add a special attribute to the link tag: <a target="_blank" href="https://www.google.com/">Open Google in a new window</a>.
How to insert an email address on a web page?
How to Insert an Email Address in HTML?
To do this, you need to place a link tag on the page with an attribute that contains the email address preceded by "mailto:". For example, if you want to insert a link to the address "john_doe@example.com", you should use the following code: <a href="mailto:john_doe@example.com">...</a>.
Why Doesn't the Email Link Work?
Usually, the reason is the lack of the "mailto:" text before the email address in the link. It should be, for example: <a href="mailto:john_doe@example.com">...</a>.
How to insert an image (graphic) link (hyperlink, hypertext reference), i.e. a clickable button, on a Web page?
How to make an image a link?
The easiest way to place an image link on a page is to insert an image inside the link tag. Image links can be created for all types of links: to a subpage, to a web address, and for email links. For example, if the image file is named "image.jpg" and is located in the same directory on your computer's disk as the *.html document where you want to insert the image link, you can use the following tags accordingly: <a href="subpage.html"><img src="image.jpg" alt="Go to subpage" style="border: 0"></a> (subpage link), <a href="https://www.google.com/"><img src="image.jpg" alt="Go to Google" style="border: 0"></a> (web address link), <a href="mailto:contact@example.com"><img src="image.jpg" alt="Contact" style="border: 0"></a> (email link).
How to add a hyperlink to an image?
Hyperlink, also known as a link or simply a hypertext link, is a link that can contain not only plain text but also an image, and even both an image and its text caption simultaneously. This means the link will work whether the user clicks directly on the image or its caption. For example: <a href="large-image.jpg"><img src="small-image.jpg" alt="View large image" style="border: 0"><br> Enter the image caption here</a>.