Creating webpages with HTML language
Tworzenie stron WWW z wykorzystaniem języka HTML
the principles of creating websites,
how to explain it in English.
Answer the introductory questions:
What is HTML?
Do you know where to display the source of the page you are looking at? i.e. a set of commands written the author of the page that the browser performs.
Can the main assumptions of the website be written in a notepad?
What to do if there are no Polish letters in HTML documents?
Read the text and based on the information contained therein, perform the first simple HTML website.
Web pages are created in HTML (Hyper Text Markup Language).
What is HTML?
It is a hypertext markup language, meaning more understandable a computer language used to communicate with a computer, which is used to describe web pages.
But first things first: hypertext is a text (content) connected loosely with links called hyperlinks. As it is in the Internet. The pages have references to each other so called links.
Now let's proceed to tags. Tags are phrases written in sharp brackets <>. As you open the page source, you will certainly notice a large number of commands saved in this way in tags.
Well, let's just explain the phrase „page description language”
To describe a website is to name its individual elements. In HTML, we will separately mark the headerheader text, the page title and the page contentpage content. However, it is not enough to say what is the header and what is the content of the page, you still have to specify how they should look like, for this purpose the CSS style sheet language is used (CSS - Cascading Style Sheets). But what is it? These are external files that contain information about the formatting of the website. There are properties such as the placement of elements on the page, the colour and size of the font, the background colour etc.
The HTML language defines what individual elements of the website are, while the CSS language defines the appearance of individual elements.
Let's get back to tags. There is a certain pattern in the page source codesource code elements - the source code consists of tags enclosed in <> characters, whereby the beginning of the source code fragment begins with the symbol <TAG> and ends with a similar symbol, however with the added sign - a vertical line tilted to the right, the so‑called forward slash /. Thus, the closing tag takes the form: </TAG>. On this basis, the web browserweb browser interprets the code sent from the server by finding the beginning and the end of the fragment and displaying it accordingly. The tags come most often in pairs.
You can create a web page source code in a regular text editor (e.g. notepad, Microsoft Word, Libre Office) as well as in a specialized HTML editor (e.g. in free HTML‑kit). When saving the page source code file, remember to give it the extensionextension .htm or .html - then the browser will correctly recognize the file type and display the page.
The page source codesource code should start with the <HTML> tagtag and end with </HTML>.
This is information for the browser with what type of document it has to deal with. The web browserweb browser recognizes <HTML> tag as a web page and can display it on our screen. To make it work, it's enough to click on the saved document with the right mouse button and choose the „open with” command and then select the browser in which you want to display the page.
Be sure to place the closing tagtag at the end of the document. And so the first line of the source code will look like: <HTML> and the last one: </HTML> which means the end of the document. All commands must be found between these two tags.
To increase the readability of the document, all tags are placed in new lines of source code. It only matters for the person who writes or reads the page source codesource code, it does not matter for the browser.
Now it's time for the headerheader of our web page. To provide information to the browser that we want to write a header, the <HEAD> tag is used. This tag must be placed between <HTML> tags both in the opening and closing ones. We use it to describe the settings of the HTML document. We write information about, among others, what language we will be used (e.g. Polish or English).
Because the <HTML> tagtag was used first and the <HEAD> tag was second and there was no closing tag </HTML> between them, we are saying that the <HTML> tag is the parent of the <HEAD> tag and vice versa, that the latter is the child of the former. Now that we've set the page parameters, it's time to put content on it. For this purpose, we will use another important tag: <BODY> (the body - the main part of the document). Therefore, between the opening tag <BODY> and ending tag </BODY> we put what we want to be displayed in the browser.
So let's write this piece of source codesource code in a notepad, the structure of such a file should look like this:
<HTML>
<HEAD>
... the content of the page header ...
</HEAD>
<BODY>
... page content ...
</BODY>
</HTML>There are diacriticsdiacritics in Polish language. As a reminder, these are graphic signs used in alphabets placed above, below, next to or inside letters, changing its articulation and creating a new letter. In Polish, there are nine letters created using diacritics. These include: ą, ć, ę, ł, ń, ó, ś, ź, ż. In order for our website to display them properly, the web browserweb browser should be informed that we want to use them. The <meta charset = „utf‑8”> or <meta charset = „windows‑1250”> tag is used for this.
To check whether the browser correctly displays Polish letters, enter the grammatically correct, but meaningless sentence, in which all Polish diacriticsdiacritics are displayed: „ Zażółć gęślą jaźń.”
One of the most important tags is <title> which specifies the title of the page. It should be placed in the headerheader section. For example, the title may look like this:
<TITLE> My first WWW page </TITLE>However, in the body of the page (that is, after the <BODY> tag) the basic tag is the paragraph tag <P>, which is a fragment of the text starting from the new line.
If we put this code in the page contentpage content section of the page:
<P> This is my first website. It looks quite nice. </P>We will get this line in the browser window:
This is my first website. It looks quite nice.
If we want both sentences to be displayed one below the other, the code would look like this:
<P> This is my first website. </P>
<P> It looks quite nice. </P>The whole source codesource code of our first page would look like this:
<HTML>
<HEAD>
<TITLE> My first WWW page </TITLE>
</HEAD>
<BODY>
<P> This is my first website. </P>
<P> It looks quite nice. </P>
</BODY>
</HTML>This is not very difficult, right? After learning the principles of constructing the source code, you need to learn about other tags that will allow you to insert more complex elements on the page and decide on their colour, size or style. About this in the next lesson.
Watch the slideshow now, where you'll see the steps to create the page source codesource code:
Zasób interaktywny dostępny pod adresem https://zpe.gov.pl/a/DTA8iRiI3
In HTML, almost every command must start and end with a tagtag. The opening and closing tag differs by the / sign. Each tag must be enclosed in two inequality symbols <>.
The importance of basic tags in HTML:
<HTML> </HTML> - the whole designed page is between them;
<HEAD> </HEAD> - the content of the headerheader is placed between them;
<BODY> </BODY> - the page contentpage content is placed between them;
<TITLE> </TITLE> - the title of the page is placed between them;
<P> </P> - between them the content of one paragraph is placed.
Exercises
means you start writing your site content.
, 2.means you start writing paragraph content.
, 3. To display Polish characters, enter the command in the header text: language = polish., 4. To write a website source code you don't need to install a dedicated computer programme.Determine which sentence is true.
- <P> means you start writing your site content.
- <P> means you start writing paragraph content.
- To display Polish characters, enter the command in the header text: language = polish.
- To write a website source code you don't need to install a dedicated computer programme.
Write a basic page source codesource code about your class or you. Enter a minimum of 5 sentences of text in 3 paragraphs. Remember about the title of the page and the correct display of Polish diacriticsdiacritics.
Describe in English the basic principles of creating websites using HTML.
Indicate which pairs of expressions or words are translated correctly.
- tworzenie stron - creating webpage
- przeglądarka - web browser
- znacznik - tag
- źródło strony - source code
- linia kodu - external file
- nagłówek - tag
- źródło strony
- source code
- web browser
- creating webpage
- tag
- linia kodu
- znacznik
- line of source code
- przeglądarka
- tworzenie stron
Glossary
tworzenie stron
Nagranie dostępne na portalu epodreczniki.pl
wymowa w języku angielskim: creating webpage
znak diaktrytyczny
Nagranie dostępne na portalu epodreczniki.pl
wymowa w języku angielskim: diacritics
rozszerzenie
Nagranie dostępne na portalu epodreczniki.pl
wymowa w języku angielskim: extension
zewnętrzny plik
Nagranie dostępne na portalu epodreczniki.pl
wymowa w języku angielskim: external file
nagłówek
Nagranie dostępne na portalu epodreczniki.pl
wymowa w języku angielskim: header
linia kodu
Nagranie dostępne na portalu epodreczniki.pl
wymowa w języku angielskim: line of source code
treść strony
Nagranie dostępne na portalu epodreczniki.pl
wymowa w języku angielskim: page content
źródło strony
Nagranie dostępne na portalu epodreczniki.pl
wymowa w języku angielskim: source code
znacznik
Nagranie dostępne na portalu epodreczniki.pl
wymowa w języku angielskim: tag
przeglądarka
Nagranie dostępne na portalu epodreczniki.pl
wymowa w języku angielskim: web browser
Keywords
creating webpagecreating webpage
line of source codeline of source code
source codesource code
tagtag
web browserweb browser