• 
  Let's get started HTML course!

  Is website development really as difficult as they say?

• 
  HTML editors

  Which HTML editor to choose: Pajączek, CoreEditor, Bluefish, Brackets, PSPad, gedit, Kate, Quanta Plus, SCREEM, Smultron?

• 
  Document structure

  What does a typical HTML document look like? What are subpages?

• 
  Entering text

  How do you enter text on Web pages? What are the rules for correct typing of punctuation marks in computer text?

• 
  Tags

  What are HTML tags?

• 
  Line break

  How do you move text to the next line in an HTML document?

• 
  Paragraph

  How to arrange text on the screen? How to add a new paragraph? How to center or align text? What are HTML attributes?

• 
  Bold

  How do I bold (embolden) text on a Web page?

• 
  Italic

  How to italicize text on a web page (italics)?

• 
  Underline

  How do you underline text on a Web page?

• 
  Font size

  How do I change the font size on a web page?

• 
  Font color

  How do I change the font color on a web page?

• 
  Font family

  How do I change the font type on a Web page?

• 
  Combining parameters

  How do you change the appearance of text on a web page?

• 
  Background and text color

  How do I change the background color and text color on a web page?

• 
  Inserting image

  How do I insert an image (graphic, photo) into a Web page?

• 
  Image alignment

  How do I determine the alignment of an image (graphic, photo) on a Web page?

• 
  Centering image

  How do I position an image (graphic, photo) or other elements in the center of the screen (centering)?

• 
  Subpage link

  What are links (hyperlinks, hypertext links) used for?

• 
  Web address link

  How to insert a link (hyperlink, hypertext link) in a Web page?

• 
  Email link

  How to insert an email address on a web page?

• 
  Image link

  How to insert an image (graphic) link (hyperlink, hypertext reference), i.e. a clickable button, on a Web page?

• 
  How to make good website

  What to avoid so that your Web site does not scare away Internet users?

• 
  Questions and answers

  HTML

• 
  Revision

  HTML

• 
  Tutorial

  HTML

I see that you are "green"... but don't worry. If you really want to "change color," read the text below. It will help you create your first web page, even in just one day. If you think that writing web pages in HTML is like "black magic" and the webpage itself is some mysterious and very complicated document, you're mistaken. Writing a simple web page is easier than you think. So, stop wasting time on excuses like, I won't learn anything! and similar, because it's not true. Start reading better.

I have only one request: try to read the entire content on this page as carefully and sequentially as possible. If you skip a point or read it too quickly, it may cause you not to understand the following parts.

Sources

The description here has been developed based on the following specifications:

• HTML 4.01 Specification
• XHTML 1.0 The Extensible HyperText Markup Language
• XHTML 1.1 - Module-based XHTML
• HTML5 - A vocabulary and associated APIs for HTML and XHTML
• Differences from HTML4
• Unicode Character Database

What is needed to create a website? Theoretically, it can be any text editor, and of course, good intentions. HTML, which stands for Hypertext Markup Language, is simply a text file where you enter all the commands for formatting text, inserting graphics, and more. However, writing a page in a plain text editor would be very cumbersome. That's why many specialized editors have been created to make your work easier, faster, and more enjoyable. Below, you will find a list of popular HTML editors (in order of licensing and alphabetically). Some of the information has been taken from the manufacturers' websites.

Windows

Pajączek (shareware - paid)

The most well-known Polish HTML editor, developed for years. It offers broad support for the latest internet technologies, including HTML, XHTML, XML, PHP, JavaScript, VBScript, Perl, MathML, SVG, SMIL, P3P, ASP, and more. This support applies not only to easier editing of source files in these languages but also offers contextual documentation for selected language commands, server browsing, and dynamic code execution, which relieves the need to remember language commands.

CoreEditor (paid - DEMO version available)

A more affordable competitor to Pajączek, a complete rewrite of the free EdHTML. It performs very well as an editor for those programming in Pascal, Assembler, Delphi, C, Java, etc. Nevertheless, the emphasis is on support for technologies such as xHTML, CSS, PHP, JavaScript, and MySQL.

Bluefish (free) ★★★☆☆

A fast and lightweight editor for webmaster-programmers. It supports HTML, PHP, C, Java, JavaScript, JSP, SQL, XML, Python, Perl, CSS, ColdFusion, Pascal. It includes HTML tag wizards, especially for page structure, tables, frames, photo albums, and more. It automatically closes tags. It has a built-in search and replace tool for multiple files simultaneously and a tag and function documentation browser. It integrates with other applications. There are other language versiona available.

Brackets (free) ★★★★☆

A lightweight yet highly advanced and modern text editor designed primarily for webmasters. With live preview directly in the browser, you can verify the effects of changes in the HTML and CSS code in real time. It also supports the installation of many free extensions, which significantly expand the program's capabilities and better tailor it to your needs.

PSPad (free) ★★★☆☆

A fast and lightweight editor of Czech production, but it handles many other character encodings better than many native programs. It has other language versions, and please note that after installation, you should remove keyboard shortcuts that conflict with combinations for obtaining some diacritical characters in the program's settings! It supports languages such as HTML, XHTML, XML, CSS, JavaScript, PHP, C/C++, Java, Pascal, Perl, Python, RSS, SQL (MySQL, Interbase, MSSQL, Oracle, Sybase), Visual Basic, Assembler. It allows you to use document templates. It has a built-in document preview using system browser. It integrates with external programs, including a CSS editor. It supports plugin mechanisms. It includes a tool for compressing and decompressing HTML code and an extensive code explorer with a list of functions and elements in the edited document. It has an implemented bracket matching function, hints, and tag and function wizards that you can create and modify on your own. It supports macros. It includes a built-in file comparison tool and search and replace in multiple files at once. It also has a handy screen color picker, an ASCII character table, and spell checking.

Linux

Bluefish (free) ★★★☆☆

In addition to the Windows version (described above), this editor is also available for Linux.

Brackets (free) ★★★★☆

In addition to the Windows version (described above), this editor is also available for Linux.

gedit (free) ★★★☆☆

The official editor of the GNOME environment, known for its simplicity. It supports languages such as C, C++, Java, HTML, XML, Python, Perl. It automatically adds line indents and matches parentheses. It supports plugins, document statistics, integration with external applications, macros, and tag lists.

Kate (free) ★★★☆☆

Part of the KDE environment. A simplified version called KWrite is also available. It highlights syntax, matches parentheses, and automatically adds line indents. It supports auto-completion, as well as plugin mechanisms. It has a built-in spell checker and character encoding conversion.

Quanta Plus (free)

Part of the KDE environment. It highlights syntax for HTML, XHTML, XML, XSLT, CSS, JavaScript, Java, PHP, C/C++, C#, Python, Perl, SQL (MySQL, PostgreSQL), Assembler, ASP, JSP, Pascal. It matches parentheses and automatically closes tags while adding line indents. It includes various tag wizards, advanced auto-completion, hints, and automatic tag closing. It allows document preview in multiple modes and browsers (Konqueror, Firefox, Mozilla, Netscape, Opera, Lynx). It has tag and attribute editors and an advanced document structure explorer. Documentation for HTML, CSS, JavaScript, and PHP languages is included. It provides document and script templates. Supports plugins and integrates with other applications. Includes built-in tools for searching and replacing in multiple files simultaneously, file comparison, and link map editor. Supports CVS. Includes a built-in spell checker.

SCREEM - Site CRreation and Editing EnvironMent (free)

Includes a link explorer with the ability to check for dead links. Offers wizards, auto-completion, hints, and automatic tag closing. Supports document templates (interprets Dreamweaver program files). Supports CVS. Includes a built-in document structure explorer. Integrates with other applications. Includes a search and replace tool for multiple files simultaneously.

Mac OS X

Smultron (paid)

Offers syntax highlighting, creation of a snippet library for frequently used code blocks. It includes a feature explorer for functions in the edited document, supports autocomplete, and automatic tag closing. It comes with a built-in search and replace tool for multiple files at once. It supports AppleScript.

Bluefish (free) ★★★☆☆

In addition to the Windows version (described above), this editor is also available for Mac OS X.

Brackets (free) ★★★★☆

In addition to the Windows version (described above), this editor is also available for Mac OS X.

If you're unsure which HTML editor is right for you or prefer to search for a foreign-language program, see: HTML Editors Ranking (online). Additional descriptions and comparisons with download links can also be found on sites like DobreProgramy.pl or in the magazine Komputer Świat.

Choosing HTML editor

There are also graphic editors, known as WYSIWYG (What You See Is What You Get). An example is FrontPage, available in the Microsoft Office suite. You don't need to know HTML to use them because they allow you to create a webpage just like in a regular text editor, and they automatically generate the HTML code. However, there's no such thing as a free lunch (except maybe for this course :-)). These editors don't give you full control over the content of the page. While you can use various rich tools, learning all the capabilities of such an editor might take more time than learning the basics of HTML. Additionally, they generate "overhead" code, which increases the page size and makes it challenging to modify the page later using text editors. This can also lead to incorrect rendering in some popular web browsers. Moreover, there are cases where at least a basic knowledge of HTML is essential because graphic editors simply don't provide all the possibilities, or the result is not entirely as expected.

You can write a website in a regular text editor, but I absolutely do not recommend this method! First of all, it's easy to make typos in HTML commands, which can result in display errors on the page. Specialized HTML editors immediately alert you to these errors because each correct HTML command is usually displayed in a different color (this is called syntax highlighting) - incorrect commands don't change color. The content in a regular text editor looks uniform, so you won't notice errors.

If you use, for example, Windows Notepad, some language diacritic characters may be incorrectly saved - in a web browser, they will appear as "gibberish."

On different forums and discussion groups, you may come across somewhat playful comments like, A real webmaster doesn't use any additional editors because it's too easy. Never believe in such tales! A true webmaster is characterized, in a nutshell, by knowledge, skills, and the ability to use the right tools, which significantly facilitate, and above all, speed up work. Additionally, for some inexplicable reason, beginners (and not only beginners) often claim that they don't use HTML editors because they want to learn HTML "properly." Such reasoning is entirely wrong! Using a regular pen, will we learn to write worse than if we did it with a goose feather and smudgy ink? On the contrary, the text written with a pen will look more aesthetic (no blots :-)). After all, spelling rules are always the same, regardless of the tool we use. Similarly, using text-based HTML editors will not make you learn HTML worse. It will only speed up your work and protect you from syntax errors, so you can get to know HTML even better. Most experienced webmasters-professionals use text-based HTML editors, and I strongly advise you to get one as soon as possible. The sooner you do it, the better for you.

For the above reasons, I strongly encourage you to install an HTML editor - preferably a freeware one. The offer is quite rich, and most of them provide more than enough features to create a great website.

Creating a website is similar to creating a regular text document. After launching an HTML editor, select the option from the menu: File/New. Now you can start writing your page. However, since an HTML document is not just a plain text file (it contains hypertext, embedded images, and must be displayed correctly on various operating systems worldwide), a special HTML document template has been designed, which should be followed.

Here's an example of what every HTML document should look like (there are other similar templates as well):

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="description" content="Enter your page description here">
	<title>Enter your page title here</title>
</head>
<body>

Insert your page content here

</body>
</html>

ATTENTION!
The above template applies to the so-called source code. If you use a graphical editor (e.g., FrontPage), you must switch to the direct HTML source code editing mode. Additionally, if you use a plain text editor (e.g., Windows Notepad), some diacritic characters may be incorrectly encoded - they may appear as "question marks"! I strongly recommend using an HTML editor.

Most HTML editors automatically insert their own template when creating a new document - similar to the one shown above. If you prefer, you can modify it by changing the sections described below. However, it's a good idea to use the template presented in this section. In this case, all changes should be made directly in the HTML source code editing mode. If you have a graphical editor, you need to switch to it, while text editors usually only have this mode - in that case, no switching is necessary.

Tip for absolute beginners
You don't need to rewrite the entire text of the template every time you create a new page. In your web browser, simply move the mouse pointer to the beginning of the text (the pointer should change its shape) and click the left mouse button. While holding down the left button, drag the mouse to the end of the template text, then release the button - the text will be selected. Now press the Ctrl+C keys on your keyboard, which will copy the selected text to the system clipboard. Then, in your HTML editor, after opening a new file, simply press Ctrl+V, and the text from the clipboard will be pasted into the document.
If you are a more experienced computer user, such tips may seem funny to you. But please be understanding - everyone has to start somewhere. Remember your own beginnings...

Most of the text in the template above should not be changed. However, you should change the text that is highlighted - the relevant sections will be described in detail below.

The content between <head> and </head> (in the above template) is called the document header (meta content), while everything between <body> and </body> constitutes the so-called document body (actual content).

Now, let's clarify the most important lines.

• In place of the text: Enter your page description here, you should enter a written description of what is on your website. Search engines like Google use this information. The text you enter here will appear in the search results when your page is found by a search engine. If you leave this field empty, the search engine will display the first few lines it finds on the page. A catchy but not too long description can encourage internet users to visit your site! Each individual page in your website should have its own description, reflecting its content.
• Between <title> and </title> (in place of the text: Enter your page title here), you should enter the title for your page. It can contain any text, but it's recommended not to be too long (just a few words at most). It should relate to the content of the page. The title appears in the browser's title bar (at the top of the program window) and in search engines after your page is found - that's why it should not be too long. A relevant title can also encourage users to check out your page!
• Most importantly, in place of the text: Insert your page content here (between <body> and </body>), you should enter the actual content of the page. It can be plain text that you want to display on the page. These are also the so-called control tags that determine the appearance of the document (which will be described later).

What are subpages?

Practically all websites consist of a number of subpages, not just one very long main page. Each subpage is simply a separate file (with the extension *.html or *.htm), created in the same way as the main page (using the template shown above). For example, this website consists of the following subpages (see in the table of contents): "HTML for Beginners," "Header and Content," "Text," etc. This content organization makes it easier for users to navigate and prevents unnecessary loading of the entire website at once, which would likely take a very long time.
All subpages are usually saved in the same directory as individual files, or in different directories (if you want to organize them thematically). From one subpage, users can automatically navigate to others by clicking on the appropriate links (if you include them).

One more thing:
The file that serves as the main page (the homepage) must be named index.html or index.htm. Your website can consist of any number of subpages - each of them is a separate file, created in the same way as the main page. Other subpages can be named as you like, as long as they have the extension *.html or *.htm. However, using very long names can be inconvenient - especially when an internet user wants to go directly to one of your subpages by entering its address in the browser (each page has its own unique address that can be referenced).

If you don't follow these recommendations, it may turn out that after uploading the page to the Internet, such files will not load (even if everything is fine on your computer)!

In the following sections on this page, we'll provide descriptions of basic commands that can help you create your very first simple webpage. All of them should be placed between <body> and </body> (as part of the actual content of the page). If you want to add plain text to the page, you can simply type it directly without using any additional commands.

If you want to place plain text on a website, you can type it directly using your keyboard in the appropriate content area of the document (see: Document Structure). You don't need to use any additional commands for this. However, keep in mind that web browsers automatically wrap lines, so in the HTML editor, you can enter text as you like, for example:

This is plain text...
This is plain text...
This is plain text...
This is plain text...

You will see the following on the screen:

This is plain text... This is plain text... This is plain text...

In the editor, you can end a line (press Enter) wherever it's convenient for you. You also don't need to split words from one line to another using a hyphen:

This is plain text... This is plain text... This is pla-
in text...

You should type the highlighted word normally. The browser will automatically position it in the appropriate line.

Finally, here are a few practical tips that are easy to overlook but are genuinely helpful:

• Maintain proper spelling and style in the text! While typos can happen to anyone, glaring spelling errors, when frequent, can deter potential readers. If you struggle with spelling (like most Poles :-)), check your text in a computer dictionary (e.g., in Word). Many HTML editors have their dictionaries.
• Use punctuation, especially commas! If you don't use them, the text you write may be completely incomprehensible to readers. Remember to place commas between simple sentences that make up a longer compound sentence (a compound sentence contains several verbs, i.e., words that answer the question, "what does it do?").
  
  Use periods - except at the end of the sentence - also after abbreviations (e.g.: "prof.", "eng."). Additionally, parentheses are often used to provide some side note (dashes can also be used in their place).
• Separate different thematic sections of the text with new paragraphs. Very long "pure" text is not very comfortable to read.

You don't have to become a literary expert right away... unless you're creating a literary website ;-) I don't mean that the text on your site has to be grammatically and orthographically perfect. Let's not get paranoid. This is an HTML course, not a lesson in proper language spelling and writing. Certainly, you'll find errors on this site too - forgive me, I'm not a language language expert. As the famous quote goes: To err is human... and nothing human is alien to me (you don't know who said that... I don't either :-)), but even minimal knowledge presented here can be helpful. The important thing is not to drive away visitors with unnecessary errors that can be easily avoided.

If you create your website "anyhow", it may suggest that the information on it is not reliable!

All of this has been a review, but there's something they don't usually teach in school and is essential when working with computer text - these are the rules for entering punctuation marks:

• Basic punctuation marks: period ("."), comma (","), exclamation mark ("!"), question mark ("?"), colon (":"), semicolon (";..."). Spacing is never placed before these marks! A space is added after them.
  

  An exception is when several of these marks occur directly after each other - in that case, a space is added only after the last one.

  A second exception applies to short multi-word abbreviations, where each abbreviated word ends with a period - in that case, a space is added only at the end of such an abbreviation (like "e.g." - exempli gratia).

  Additionally, dates, times, and numbers should be noted that if there's a slash, comma, or colon within them, no space should be added after it (e.g.: "1410-07-15", "9:08", "12.5").

  Also, note that individual periods within an ellipsis should not be separated by spaces, and if a sentence ends with an abbreviation ending with a period, an additional period is not added after it. No spaces should be added after an ellipsis if it starts a new text fragment - to indicate the continuation of some previous statement.

  Correct: ...word... word. word, word! word? word: word; word... e.g.: tel./fax 1410-07-15, 9:08, etc.
  Incorrect: ... word ... word , word ! word,word word :word...word ... word. . . word... . e. g. : tel. / fax 1410- 07- 15 , 9: 08, etc..
• Brackets and quotation marks. The content inside brackets should never be separated from them by spaces (this applies both to the opening and closing brackets)! A space should always be placed before opening brackets. Usually, it is also added after closing brackets. The exception is when a basic punctuation mark appears directly after the bracket - in this case, no space is added between them. This applies to quotation marks as well.
  
  Correct: word (content) word "content" word (content), word "content"! word - (...) - ("content!") "content" (etc.).
  Incorrect: word ( content ) word( content )word word( content ) word " content " , word "content" ? -( ... )-"content"( "content! " ) (etc. ) .
• Hyphen (dash) - it should be typed with spaces on both sides. An exception is connectors that are part of compound words (e.g.: "e-mail"), phone numbers, postal codes, etc. - in these cases, they are not separated by spaces.
  
  Correct: This is - as old writings say - correct. 99-999 e-mail
  Incorrect: This is- as old writings say-incorrect. 99 - 999 e - mail
• Mathematical operators ("+", "-", "*", "/" "=") are usually typed with spaces on both sides. An exception is the plus and minus signs, which don't indicate a mathematical operation but the sign of a number - in this case, no space is added after them. Additionally, a parenthesis in function names should not be preceded by a space.
  
  Correct: f(x, y) = -2x + 3y + 4
  Incorrect: f (x,y)= - 2 x+ 3 y+4

I know that the comments presented here may amuse some of you (especially the first part). Be tolerant of those who are not experienced. Remember if you have ever come across a website that was teeming with annoying errors. What can you think of such a site then? I hope that participants in this course will never have that experience.

Aside from regular text on a page, you can introduce tags (also known as markup). A tag is a special text enclosed in angle brackets, for example: <b>. It is part of the HTML language syntax and allows you to control the appearance of the page. Thanks to it, you can, for example, set the background color, apply text formatting, insert an image or a table, and so on. The tag is not visible on the screen. Only the effects of its operation are visible (e.g., inserting an image). To make the <b> tag above visible, I had to use a little "trick" (if you can't wait and want to know what it is right now, take a look at the page: Special Characters).

Because the characters: "<" (less-than sign) and ">" (greater-than sign) are reserved for tags, they should not appear in normal page content. If you need to use them, you should enter them as: &lt; and &gt; respectively. Additionally, the "&" (ampersand) should be replaced with: &amp;

There are opening tags (e.g., <b>) and closing tags (e.g., </b>). Notice that the closing tag begins with a slash (the "/" character) and has the same name as the opening tag. Between the opening and closing tags, you can place some text that you want to format (in this case, it will be text in bold), for example:

<b>This text will be bold.</b>

<b>
This text will be bold.
</b>

The opening tag must always appear before the closing tag. This is quite a logical rule, as you can't close doors that haven't been opened yet, and you can't open doors that aren't closed... unless we're talking about revolving doors ;-) It's also important to remember that almost every tag (with a few exceptions) must be closed with the appropriate closing tag, which means you can't forget to insert closing tags!

In HTML, it doesn't matter what letters we use for tags; for example, the <html> tag can be written like this: <hTmL>. However, you'll agree that the second way is not very readable. That's why in this course, all tags will be written in lowercase.

Practically every HTML editor offers:

• Syntax highlighting, which means that if you enter a valid tag, its syntax will be displayed in a specific color, depending on the program's settings. This immediately highlights all errors, typically simple typos. This is probably the most important advantage of using HTML editors. This is why it is not recommended to use regular text editors for creating web pages.
• Automatic closing of tags, which involves the program automatically adding the appropriate closing tag right after the user provides the opening tag. This speeds up work significantly, and you won't forget to close tags because the program does it for you automatically.
• Generators (or wizards) help with creating various tags (through special dialog boxes).

<br>

The above tag (<br>) is used when we want to immediately end a line. You may ask: Why use it? Can't we simply press Enter and move the text cursor to the next line? Well, you can't. Web browsers ignore all line break characters entered with the Enter key (they also ignore placing more than one space next to each other - see: Special Characters). For example, if you enter the following text in an editor:

This is the first line...
and this is the second line.

in the browser, you'll see:

The line will only end automatically when the provided text is too long to fit in a single line. However, if you want to immediately end a line, you can do so by placing the <br> tag where you want the line to end. For example, entering the following in an editor:

This is the first line...<br>
and this is the second line.

will result in displaying the text as:

If you place more than one <br> tag next to each other, you can "go down" several lines, for example:

This is the first line...<br><br><br>
...and this is the next line.

will display:

Note that the <br> tag itself is not visible on the browser screen. Only the effects of its operation, i.e., ending the line, are visible.

The <br> tag in HTML does not have a closing tag (this is one of the few exceptions)!

<p>Enter paragraph text here</p>

Paragraph (sometimes called a paragraph) is a section of text. Paragraphs are separated by a blank line. The content of a paragraph should be placed between the <p> and </p> tags. It is common practice to enclose most of the regular text on a web page within paragraphs. A single paragraph represents a section of text that is thematically different from the previous one. Instead of using two line break tags <br><br>, you can simply wrap the desired text in a paragraph. The result will be the same, and the browser will display such text more effectively. This makes the page look more aesthetically pleasing and makes it easier to find relevant information on it.

Paragraph (paragrah) is crucial in HTML syntax because it allows you to format text on the screen in a specific way. This is done by providing tag attributes. Attributes are always placed inside the opening tag, immediately after its name (separated from it by a space), and before the closing angle bracket, i.e., ">". Each tag has specific attributes that it supports. For a paragraph, you can use the following attributes, among others:

1. Text alignment to the left (default)

   <p style="text-align: left">Enter paragraph text here</p>

   or simply

   <p>Enter paragraph text here</p>

2. Text alignment to the right

   <p style="text-align: right">Enter paragraph text here</p>

3. Centered text

   <p style="text-align: center">Enter paragraph text here</p>

4. Justified text (aligns to both margins at once)

   <p style="text-align: justify">Enter paragraph text here</p>

In all cases, highlighted are the tag attributes along with their values (attribute values are enclosed in double quotes after the equal sign).
Replace the text: Enter paragraph text here with the text you want to format as specified by the parameter.

Example <p {text-align}>

style="text-align: left",
left alignment,
left alignment (style="text-align: left"),
(style="text-align: left")...

style="text-align: right",
right alignment,
right alignment (style="text-align: right"),
(style="text-align: right")...

style="text-align: center",
centered,
centered (style="text-align: center"),
(style="text-align: center")...

justified, aligns to both margins at once (style="text-align: justify"); justified, aligns to both margins at once (style="text-align: justify"); justified, aligns to both margins at once (style="text-align: justify"); justified, aligns to both margins at once (style="text-align: justify"); justified, aligns to both margins at once (style="text-align: justify"); justified, aligns to both margins at once (style="text-align: justify"); justified, aligns to both margins at once (style="text-align: justify"); justified, aligns to both margins at once (style="text-align: justify"); justified, aligns to both margins at once (style="text-align: justify"); justified, aligns to both margins at once (style="text-align: justify")...

<b>Enter text here</b>

This tag allows you to make part of the text bold. The text inside the tag will appear in a bold font. A similar function is typically available in regular text editors (e.g., WordPad) when creating a standard text document.

Example <b>

<i>Enter text here</i>

Allows you to write text in italics.

Example <i>

<u>Enter text here</u>

Allows you to underline a portion of the text.

Example <u>

<span style="font-size: size">Enter text here</span>

Example {font-size}

<span style="color: color">Enter text here</span>

If you need more than these sixteen colors, you can visit the following website: Colors.

HTML editors often have a special color picker to easily choose a color of any shade.

Example {color}

After entering the following HTML code in an HTML editor:

<span style="color: red">This text is written in red font</span>

you will see the following on your browser screen:

<span style="font-family: font">Enter text here</span>

<span style="font-family: font1, font2, font3, ...">Enter text here</span>

Attention! Be cautious when using this command because if the user viewing your page does not have the specified font on their operating system, the text will be displayed in the default font (in Windows, most likely 'Times New Roman', although this is not certain). Additionally, not every font can correctly display diactitic characters from any language. Make sure to test the result in practice!

In the case of the second command, the font that the user has as the first in their list will be used. This is a better approach as it allows for a fallback in case the user does not have one of the specified fonts.

In Windows, the following fonts should be standardly available: 'Times New Roman', Arial, 'Courier New'. Additionally, as of some time ago, Internet Explorer came with: Verdana, Tahoma, 'Trebuchet MS', Georgia - so even now they are still commonly available. When defining fonts, it's a good idea to use these fonts and those that are default in other operating systems (e.g., Helvetica - similar to Arial).

All of the above parameters (attributes and tags) related to text can be combined. For example, if you input the following in an editor:

<p style="text-align: center"><span style="font-size: large; color: red"><b><i><u>
This is some text
</u></i></b></span></p>

You will get:

This is some text

Notice that you should close the tags in the reverse order in which you opened them. This means you first close the tag that was opened last (in our example, it's <u>), and finally, close the tag that was opened first (in this case, <p>).

Additionally, the values of the style="..." attribute related to the same tag (in our example, it's the <span> tag) can be combined by listing them one after another, separated by semicolons (in our example, the values are: "font-size: large; color: red"). The order of entering both attribute values and tags (opening tags) is arbitrary.

<body style="background-color: background color; color: text color">
Here is the actual content of the page
</body>

If you want to set the background color and text color for the entire page, you can use additional attributes for the <body> tag. These values ("background-color: ...; color: ...") are not entered within the actual content of the page, as with tags. Instead, they are placed in the style="..." attribute inside the opening <body> tag (before the actual content) because they are not separate tags but attribute values. It's essential to remember that there can be only one <body> tag on a page. All attributes related to it (like the one shown above) are added to the existing tag, rather than inserting a new one in a different part of the page.

The background color and text color of the entire page should always be set simultaneously.

Even if you set the text color for the entire page, you can later change it locally using the <span style="color: color">...</span> command (see: Font Color).

<img src="Provide relative path to the image" alt="Provide alternative text">

WARNING!
The <img> tag does not have a closing tag in HTML!

Example <img>

Access path

Below, you will find examples of correct access paths for various directory structures on your disk. In all cases, our intention is to insert an image named plik.gif into the document strona.html - the "path" is marked in green with arrows. When building the path, we always start from strona.html and aim to reach plik.gif. The file index.html serves as the main page, which we are not concerned with here.

1. Correct: plik.gif
   Incorrect: C:\www\plik.gif, plik.GIF, plik

   

   As you can see, the image plik.gif and the document strona.html are in the same directory. It doesn't matter whether both files are in the main directory of the website or in a subdirectory - the access path is the same. In this case, just provide the file name without any additions. This is the simplest directory structure (especially the first example - everything in one directory). It is used, particularly in websites consisting of a few subpages. If you have trouble creating more complex access paths, I recommend using this model, as the chance of making a mistake is minimal.

2. Correct: katalog/plik.gif
   Incorrect: C:\www\katalog\plik.gif, katalog\plik.gif, katalog/plik.GIF, katalog/plik

   

   If plik.gif is in a subdirectory, and the document strona.html is not, you need to specify the name of the subdirectory before the file name, followed by a forward slash ("/"). This structure is used, for example, when you have many files (e.g., images) and want to keep them organized in a separate subdirectory.

3. Correct: ../plik.gif
   Incorrect: C:\www\plik.gif, katalog/plik.gif, ../plik.GIF, ../plik

   

   Similar to the previous case, but now plik.gif is in the main directory, and strona.html is in a subdirectory. In this case, you need to prepend ../, which means "go up" to the parent directory, from katalog/ to www/. This structure is useful when you have multiple sections on the website, each consisting of many subpages placed in separate directories.

4. Correct: ../katalog2/katalog2a/plik.gif
   Incorrect: C:\www\katalog2\katalog2a\plik.gif, katalog2/katalog2a/plik.gif, ../katalog2/katalog2a/plik.GIF, ../katalog2/katalog2a/plik

   

   This is a slightly modified version of the previous case. Now, both plik.gif and strona.html are in separate subdirectories, but they are two different directories. You begin by building the path in the katalog1a/, where your strona.html is located. Then, you go up to the parent directory, which is done by adding ../ at the beginning of the access path. Now you can freely enter the second subdirectory, katalog2/ (by specifying its name), where your plik.gif is located, and at the end, as always, provide the file name. This structure is useful when you have multiple sections on the website and many files. In this case, the main directory usually contains only the homepage index.html, and all subpages and files are placed in subdirectories.

5. Correct: ../../katalog2/katalog2a/plik.gif
   Incorrect: C:\www\katalog2\katalog2a\plik.gif, katalog2/katalog2a/plik.gif, ../katalog2/katalog2a/plik.gif

   

   This example is quite advanced. If you understand this, you can say that you have "access paths at your fingertips"! We are "located" in the katalog1a/ (as our page where we want to insert an image is here). The first two dots in the access path make you go up one level - to the katalog1/. The next two dots correspond to going up one more level, which means to the www/. Now you can enter the subdirectory katalog2/ (by specifying its name) and then the subdirectory katalog2a/, which is inside it. Finally, at the end of the path, as always, you provide the file name.

The above methods of specifying the access path apply to all types of files, including subpages. A common mistake made by beginners is using an absolute access path, for example:

This is a serious mistake! After you upload the page to the internet, it is saved on the server's computer (not yours). The structure (look) of the directory tree there will undoubtedly be different from your local disk. Therefore, an absolute path does not exist there. Even worse, you may not detect the error immediately because the image will load correctly on your computer, but others won't see it! Also, note that in the paths, we use forward slashes ("/\

There is another type of serious error:

Both paths may seem correct, but they are absolutely unacceptable! You must not insert files from a different disk. Furthermore, you should not refer to files that are "above" the main website directory - in our case, it's www/ (you can recognize the main website directory by the fact that the main page index.html is directly inside it).

Remember: always use relative, not absolute access paths! Use regular slashes, not backslashes. All files of your website should be within the main website directory, never above it!

Some HTML editors offer automatic insertion of relative access paths (after saving the page to the disk) by selecting the file in a special selector. This makes it much easier to create complex access paths.

By the way, I want to point out that the homepage index.html (see above) must be located in the main public directory on the server. When you upload your site to the internet, you send all the files located in the www/ directory, but not the directory itself. index.html must absolutely be in the main directory on your web hosting account; otherwise, your site won't display at all! When uploading your site to the internet, don't forget to copy all image files to the server as well!

If you don't follow these recommendations, you may find that after uploading the site to the internet, some files do not load (even if everything is fine on your computer)!

Image formats

Finally, one more piece of advice: images inserted on a web page significantly increase its file size, which, in turn, prolongs the page loading time. If your local copy of the page loads lightning-fast on your computer, don't assume it will be the same after you put it on the internet. Of course, the larger the image, the more disk space it occupies. Moreover, too much unthought-of graphics only distracts from the content. So, try not to overdo it. It's also essential to make sure that all images are saved in one of the following three formats:

• GIF - for drawings with fewer than 256 colors, such as menu buttons and other hand-drawn decorations. This format supports transparency.
• JPG - for multicolored photos. It does not support transparency.
• PNG - allows you to save both hand-drawn graphics and photos with very high quality. It supports compression as well as full transparency and partial transparency.

Under no circumstances should you use the BMP format because it has no or very poor compression, resulting in significantly larger file sizes for images saved in this format.

You can find useful graphics for websites directly on the internet. Many online services for webmasters offer ready-made menu buttons and other useful add-ons for free. All you need to do is a bit of searching.

<img src="Enter the relative path to the image here" alt="Enter alternative text here" style="float: alignment">

Example <img {float}>

style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left", style="float: left"...

style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right", style="float: right"...

<div style="text-align: center"><img src="Enter the relative path to the image here" alt="Enter alternative text here"></div>

This command allows you to center the image, positioning it in the center of the screen.

Example {text-align: center} <img>

(within the same website)

Practically every website includes links (also called references or hyperlinks). Most often, a special, highlighted piece of text (or an image) serves as a link, and when you click on it, you are taken to another page. Just as every book is divided into chapters, websites typically consist of subpages. Each subpage is a separate HTML file (with the extension *.html or *.htm) and its content is usually thematically different from the others (it's created in the same way as the main page). This organization makes it easier for users to navigate and prevents unnecessary loading of the entire website at once (which would probably take a very long time). Placing everything in one file (index.html) is not recommended (unless your site is really short)!

To allow users to move freely between subpages of our website, they need to be connected in some way. You should place links to all subpages in a chosen location, typically on a separate page, which serves as a table of contents and contains links to all subpages of the site.

The syntax of a link to a subpage (within the same website) is as follows:

<a href="relative path to the subpage">link description</a>

With this type of link, you can refer to any file located on an FTP account with the website. This allows you to build a download section, i.e., links for downloading files.

Example <a href>

To see an example of how this type of link works, you can click here (it will take you to the main page of this course).

(across the entire Internet)

Users can also be directed to other people's websites, not just their own, and this does not in any way violate copyright (unless you sign it as the author of that page ;-)). On the contrary, it is free advertising for the page to which the reference is made.

The syntax of a link to a web address (across the entire Internet) is as follows:

<a href="web address">link description</a>

The web address must always begin with http:// or https://

This type of link is useful if you want to include so-called links to any websites across the entire Internet on your site. When surfing the web, if you come across an interesting page, you can copy its address (from the browser's address bar) and place it in a link. Thanks to this, all users visiting our website will be able to go directly to the indicated page without having to type its address.

Example <a https>

To see an example of how this type of link works, you can click here (it will take you to the home page of the google.com search engine).

<a href="mailto:email address">link description</a>

This link is useful when you want to include the address of your email inbox (email) on the page. This way, you will be in constant contact with internet users visiting your website.

Remember that providing your address on a website may result in receiving unwanted messages - spam. A good idea may be to create a free email account on any internet portal and provide the address of such an account on your website - you can always change the free account. When creating a website on a free server, you often get an email account. You can use it then.

Example <a mailto>

As an example of using such a link, you can send me an email. Just please, if you don't have anything specific to write, don't send me empty emails ;-)

All links presented so far have been in text form. If you want to include image buttons in your website's menu, you should use the following command:

<a href="address"><img src="Specify the relative path to the image" alt="Specify alternative text here" style="border: 0"></a>

As you can see, image links can be used in combination with any type of links (subpage, web address, or email). However, they are most commonly used to create navigation menus for websites (subpage links).

It's best to save button images in the GIF format. If you lack artistic skills, you don't have to draw all the graphics yourself. You can find many websites on the Internet where you can download ready-made buttons for free.

Example <a href, img>

Click on this button:

Finally, I would like to address a very important matter that many people seem to forget. A basic knowledge of HTML is sufficient to create a webpage, but to create a good website that will be frequently visited and something to be truly proud of, you need something more:

1. Carefully consider the theme of your website. Of course, no one will stop you from publishing information like your dog's name is Azor and your cat is named Mruczek, but can such information really attract readers? Keep in mind that some people access the internet from their smartphones or tablets, paying for the amount of data downloaded from the web. Will anyone be willing to spend their time reading such information? Try to find a topic that interests you, is original, and can pique the interest of others. Usually, focusing on one field brings better results than writing about a little bit of everything.
2. Be cautious when selecting colors for your site, especially regarding background and text. Uninteresting or glaringly bad color combinations are the most significant giveaway that the site's author is an amateur. Imagine what customers would think of a company that has a website with a green background and red text (or, worse, the other way around)! Avoid bright colors in the background at all costs. If you lack ideas, stick to white background and black text - it's the safest option. Dark or delicate pastel colors (light) also yield good results. The background must never hinder the readability of the site, so choose an appropriate text color.
3. Don't overdo it with graphics. Knowing how to add images to a webpage doesn't mean you should inundate it with them. Remember that graphics have the most significant impact on page loading speed, so limit their quantity and size. If you must include images, ensure they are of high quality. When creating your images, use antialiasing to smooth out jagged edges. The hallmark of a skilled designer is the efficient and skilled handling of graphics that seamlessly blend with the site's appearance.
4. Examine other reputable websites. Pay attention to the design. More is not always better. Sometimes a simpler design looks better and, most importantly, is more readable than elaborate decorations. The most critical aspects are a good idea and the color scheme of the site and graphic design. If you don't make an effort, your site will immediately say, "There's nothing worth noticing here; you can leave." Most good websites on the internet are structured as follows: at the top, there's a banner or site logo, on the left or right - the menu, and next to it - the page's content. This doesn't mean you have to strictly adhere to this canon, but if you want a similar structure, in the main content of the page (BODY), you can enter something like this:

   <header style="text-align: center">You can place the site's logo here</header>
   <nav style="width: 300px; float: left; overflow: hidden">
   Here, you place links to the table of contents
   </nav>
   <article style="margin-left: 320px">
   
   Here, you input the page's content
   
   </article>
   <footer style="text-align: center; clear: both">You can place the site's footer here</footer>

   and you will get:
   
   
   You can place the site's logo here

   Here, you input the page's content
5. Navigation on the site is crucial. A confusing page layout, a menu that makes it hard to find anything, and similar issues are common reasons for users to become discouraged and leave a website. When designing the system of links, try to put yourself in the shoes of internet users. Remember that they don't know the site as well as you do and may not want to delve into the details. Therefore, it's a good idea to place hyperlinks to the most interesting sections in a visible place, implement a search system, or an index. For more extensive sites, it's advisable to divide them into thematic sections. The navigation method should be comfortable, practical, logical, and easily accessible.
6. Pay attention to the correctness of spelling and the stylistic quality of the text. Learn the rules for entering punctuation marks. If there are many errors on a website, the author likely has nothing important to convey.
7. Make an effort to regularly update the site's content and remove any errors that arise. Improve the graphic design and navigation system to prevent the site from becoming dull. Inform users about new features and maintain communication with them via email. Be open to constructive criticism.

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.

See if you remember what the following HTML source code snippets are responsible for. If in doubt, click the "See more..." link. under the selected group of examples.

How do you move text to the next line in an HTML document?

<br>

See more...

How to arrange text on the screen? How to add a new paragraph? How to center or align text? What are HTML attributes?

<p>Enter paragraph text here</p>

<p style="text-align: left">Enter paragraph text here</p>

<p>Enter paragraph text here</p>

<p style="text-align: right">Enter paragraph text here</p>

<p style="text-align: center">Enter paragraph text here</p>

<p style="text-align: justify">Enter paragraph text here</p>

See more...

How do I bold (embolden) text on a Web page?

<b>Enter text here</b>

See more...

How to italicize text on a web page (italics)?

<i>Enter text here</i>

See more...

How do you underline text on a Web page?

<u>Enter text here</u>

See more...

How do I change the font size on a web page?

<span style="font-size: size">Enter text here</span>

See more...

How do I change the font color on a web page?

<span style="color: color">Enter text here</span>

See more...

How do I change the font type on a Web page?

<span style="font-family: font">Enter text here</span>

<span style="font-family: font1, font2, font3, ...">Enter text here</span>

See more...

How do I change the background color and text color on a web page?

<body style="background-color: background color; color: text color">
Here is the actual content of the page
</body>

See more...

How do I insert an image (graphic, photo) into a Web page?

<img src="Provide relative path to the image" alt="Provide alternative text">

See more...

How do I determine the alignment of an image (graphic, photo) on a Web page?

<img src="Enter the relative path to the image here" alt="Enter alternative text here" style="float: alignment">

See more...

How do I position an image (graphic, photo) or other elements in the center of the screen (centering)?

<div style="text-align: center"><img src="Enter the relative path to the image here" alt="Enter alternative text here"></div>

See more...

What are links (hyperlinks, hypertext links) used for?

<a href="relative path to the subpage">link description</a>

See more...

How to insert a link (hyperlink, hypertext link) in a Web page?

<a href="web address">link description</a>

See more...

How to insert an email address on a web page?

<a href="mailto:email address">link description</a>

See more...

How to insert an image (graphic) link (hyperlink, hypertext reference), i.e. a clickable button, on a Web page?

<a href="address"><img src="Specify the relative path to the image" alt="Specify alternative text here" style="border: 0"></a>

See more...

Theory without practice is nothing. That's why I encourage you to constantly experiment with HTML code while reading the course. This way, the information you've learned will be better retained in your memory. Moreover, often it's only during practical exercises that we realize we haven't fully understood the theory. But most importantly, practice is what makes us better in a given field. This, in turn, stimulates and develops our passion, allowing us to become true masters - "practice makes perfect." So, don't neglect this stage of learning. Install an HTML editor and start practicing systematically.

As part of developing your practical skills, I recommend doing a series of exercises. These exercises will involve creating a simple webpage based on the information you've learned. In the following chapters, we will gradually expand this webpage, so don't forget to save it on your computer. At this stage, publishing the page on the internet is not yet necessary.

1. Find a topic that particularly interests you. It could be your favorite book, video game, music band, a sports discipline, etc.

   If you plan to use information from the internet for your webpage, remember to respect copyright laws! You can't always freely copy any text to your site without the author's permission. Each quotation should be clearly marked with its source.

   You can also create a webpage about yourself, where you briefly describe your biography, interests, hobbies, etc.
2. Open an HTML editor. If you're using a graphical editor, switch to direct source code editing mode.
3. In the editor, create a new HTML file and paste the skeleton of the webpage, filling in the necessary parts.
4. Start entering the actual content of the webpage. You can preview your work in a web browser as you go. To do this, save the file as index.html, and then locate it on your disk using any file browsing program (in Windows, you can use File Explorer, for example) and double-click on the newly created document's icon. This way, your webpage will open in a browser. Every time you make changes to it, simply save the file in the editor, then switch to the browser and refresh the page (press F5) to see the effects.
5. Return to the HTML editor. Divide the text into paragraphs to make it more readable.
6. Select parts of the text that you believe the reader should pay particular attention to and place them in bold tags.
7. Add illustrations to the webpage.

   When it comes to photos and graphics, it's essential to remember to respect copyright laws! You can't freely copy every image to your webpage without the author's permission.

   If you're creating a webpage about yourself, it can simply be your photo.
8. Create a subpage named links.html (a new HTML file in the editor) and include a link to it on the homepage (in the index.html file). You can learn more about what subpages are and how to create them in the chapter: Document Structure.
9. On the links.html subpage, insert links to interesting websites on the topic you're describing. If you're creating a webpage about yourself, you can place links to your profiles on social media such as Facebook, Twitter, YouTube, LinkedIn, etc.
10. Create a subpage named contact.html (a new HTML file in the editor) and include a link to it on the homepage (in the index.html file). On this page, add an email link with your email address.