Institute of Information Science - University of Miskolc

User Tools

Site Tools

Trace: • basics_of_the_hypertext_markup_language
tanszek:oktatas:techcomm:basics_of_the_hypertext_markup_language

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
tanszek:oktatas:techcomm:basics_of_the_hypertext_markup_language [2024/09/18 09:53] – kissatanszek:oktatas:techcomm:basics_of_the_hypertext_markup_language [2025/09/15 15:52] (current) – [Exercise] kissa
Line 1: Line 1:
 ===== HTML (HyperText Markup Language) ===== ===== HTML (HyperText Markup Language) =====
  
-==== 1. XML, a structured data description language ====+==== XML, a structured data description language ====
  
 XML (eXtensible Markup Language) is a universal data description language readable by both humans and machines, used for structured data storage and transfer. XML (eXtensible Markup Language) is a universal data description language readable by both humans and machines, used for structured data storage and transfer.
Line 7: Line 7:
 Example: Example:
 <code XML> <code XML>
-<mail>+<mail id="00001">
     <from>Alice</from>     <from>Alice</from>
     <to>Bob</to>     <to>Bob</to>
Line 17: Line 17:
 The structures ''mail'', ''from'', ''to'', etc., are called **tags** or **elements**. The structures ''mail'', ''from'', ''to'', etc., are called **tags** or **elements**.
  
-HTML documents, which describe the content of web pages, are also written in XML, using various elements with specific meanings to format or structure content.+Tags can have **attributes** (e.g. the identifier of the mail).
  
-==== 2. Basic Structure of an HTML Document ====+HTML documents, which describe the content of web pages, are also written in XML, using standardized elements with specific meanings to format or structure content. 
 + 
 +==== Development Environment ==== 
 + 
 +For practicing HTML, we will use [[https://code.visualstudio.com/|Visual Studio Code]] (VSCode), the open-source code editor developed by Microsoft. 
 + 
 +After VSCode is started, **Live Server** extension should be installed. To do this, click on the following icon, in the left sidebar: 
 +  
 +{{:tanszek:oktatas:techcomm:pasted:20240923-091837.png}} 
 + 
 +Then search **Live Server**, and click the "Install" button on the following result: 
 + 
 +{{:tanszek:oktatas:techcomm:pasted:20240923-092114.png}} 
 + 
 +If the extension installed successfully, you can see the following button in the bottom right corner of VSCode: 
 +{{:tanszek:oktatas:techcomm:pasted:20240923-092231.png}} 
 + 
 +To initialize a new project, create a new folder with File Explorer, then open this folder in VSCode (File > Open folder...). 
 + 
 +Then, create a new file called **index.html**. 
 + 
 +Copy the code from the next section, then save your HTML file (Ctrl+S). 
 + 
 +Now, push the "Go Live" button, and open http://localhost:5500/ on your browser (it may be automatically opened by Live Server extension). If you change the code of the HTML file, the content will also be updated in the browser. 
 +==== Basic Structure of an HTML Document ====
  
 An HTML document mainly consists of three main parts: ''<html>'', ''<head>'', and ''<body>''. For example: An HTML document mainly consists of three main parts: ''<html>'', ''<head>'', and ''<body>''. For example:
Line 31: Line 55:
 <body> <body>
     <h1>Heading 1</h1>     <h1>Heading 1</h1>
-    <p>This is a paragraph</p>+    <p>This is a paragraph.</p> 
 +    <p>This is also a paragraph.</p>
 </body> </body>
 </html> </html>
Line 46: Line 71:
 In the following, we can learn about the HTML elements that can be used in the ''body'' of the document. In the following, we can learn about the HTML elements that can be used in the ''body'' of the document.
  
-==== 3. Comments ====+==== Comments ====
  
 HTML documents can contain comments, which are not visible to users in the browser, but are visible to developers in the HTML code. HTML documents can contain comments, which are not visible to users in the browser, but are visible to developers in the HTML code.
Line 58: Line 83:
 It can be used to make our code more transparent and understandable for developers. It can be used to make our code more transparent and understandable for developers.
  
-==== 4. Headings and Paragraphs ====+==== Headings and Paragraphs ====
  
 Headings are defined using the ''<h1>''-''<h6>'' elements, while paragraphs are defined using the ''<p>'' element. Headings are defined using the ''<h1>''-''<h6>'' elements, while paragraphs are defined using the ''<p>'' element.
Line 69: Line 94:
 <p>This is a paragraph.</p> <p>This is a paragraph.</p>
 <p>This is also a paragraph.</p> <p>This is also a paragraph.</p>
 +
 +<h3>Heading Level 3</h3>
 +<p>This is a paragraph.</p>
 +
 +<h4>Heading Level 4</h4>
 +<p>This is a paragraph.</p>
 </code> </code>
  
  
-==== 5. Text Formatting and Structuring ====+==== Text Formatting and Structuring ====
  
 Elements like ''<br>'', ''<hr>'', ''<small>'', ''< sup>'' / ''< sub>'', ''< span>'', ''< div>'' help with text formatting and structuring. Elements like ''<br>'', ''<hr>'', ''<small>'', ''< sup>'' / ''< sub>'', ''< span>'', ''< div>'' help with text formatting and structuring.
Line 93: Line 124:
 </code> </code>
  
-''<br>** inserts a line break in the text.+''<br>'' inserts a line break in the text.
  
-''<hr>** creates a horizontal line, often used to separate content.+''<hr>'' creates a horizontal line, often used to separate content.
  
 ''<small>'' reduces the size of the text, typically used for disclaimers or footnotes. ''<small>'' reduces the size of the text, typically used for disclaimers or footnotes.
Line 107: Line 138:
 ''< div>'' defines a division or section in an HTML document, often used to group multiple elements together for layout or styling purposes. ''< div>'' defines a division or section in an HTML document, often used to group multiple elements together for layout or styling purposes.
  
-==== 6. Links ====+==== Links ====
  
 Links can point to web pages, email addresses, telephone numbers, etc. Links can point to web pages, email addresses, telephone numbers, etc.
  
 <code XML> <code XML>
-<a href="index.html">Internal page link</a> +<a href="contact.html">Internal page link</a> <!-- To make this work, we should create another HTML document, named as contact.html.  --> 
-<a href="https://www.example.com">External website link</a>+<a href="https://www.uni-miskolc.hu/">External website link</a>
 <a href="mailto:info@example.com">Email link</a> <a href="mailto:info@example.com">Email link</a>
-<a href="tel:0036301234567">Phone number link</a>+<a href="tel:+36301234567">Phone number link</a>
 </code> </code>
  
  
-==== 7. Images ====+==== Images ====
  
 Images are inserted using the ''<img>'' element, with the ''src'' attribute specifying the path to the image and the ''alt'' attribute providing an explanatory text. Images are inserted using the ''<img>'' element, with the ''src'' attribute specifying the path to the image and the ''alt'' attribute providing an explanatory text.
Line 127: Line 158:
 </code> </code>
  
 +In this example, ''src'' contains an **absolute URL**, the image will be downloaded from the server behind the www.uni-miskolc.hu domain.
 +
 +In addition to this, we can define **relative URL**s to our HTML file. For example, if we have a folder ''imgs'' next to our HTML document, and a file called ''main_building.png'' in this folder, we can refer to it as:
 +
 +<code XML>
 +<img src="imgs/main_building.png" alt="Main Building of the University of Miskolc">
 +</code>
 +
 +Try downloading an image from the internet, and using a relative URL in your HTML document!
  
-==== 8. Ordered and Unordered Lists ====+==== Ordered and Unordered Lists ====
  
-Ordered lists use the ''<ol>'' tag, while unordered lists use the ''<ul>'' elements. List items are marked with ''<li>'' tags.+For ordered lists, you can use the ''<ol>'' tags, while for unordered lists, use ''<ul>'' elements. List items are marked with ''<li>'' tags in each list type.
  
 <code XML> <code XML>
 <!-- ordered list --> <!-- ordered list -->
 +<p>The final result of the sports day:</p>
 <ol> <ol>
-    <li>First item</li> +    <li>Computer Scientists</li> 
-    <li>Second item</li>+    <li>Mechanical Engineers</li> 
 +    <li>Chemical Engineers</li>
 </ol> </ol>
  
 <!-- unordered list --> <!-- unordered list -->
 +<p>We should buy today:</p>
 <ul> <ul>
-    <li>First item</li> +    <li>apples</li> 
-    <li>Second item</li>+    <li>milk</li> 
 +    <li>bread</li>
 </ul> </ul>
 </code> </code>
  
-==== 9. Tables ====+==== Tables ====
  
 To create tables, use the following elements: To create tables, use the following elements:
Line 174: Line 218:
 </code> </code>
  
 +''colspan'' is an **attribute**, and is used here to merge 2 table cells in the row. Attributes are used often to define certain properties of HTML elements (e.g. styling, alternative text, etc.).
  
-==== 10. Exercise ====+==== Exercise ====
  
-Create an introduction page on your favorite topic (music, film, product, etc.) using paragraphs, images, links, tables, and lists.+Create an introduction page on your favorite topic (music, film, sport, etc.) using headings, paragraphs, images, links, tables, and lists.
  
 Feel free to use online resources (e.g. [[https://www.w3schools.com/html/|W3Schools HTML tutorial]]) as help. Feel free to use online resources (e.g. [[https://www.w3schools.com/html/|W3Schools HTML tutorial]]) as help.
  
tanszek/oktatas/techcomm/basics_of_the_hypertext_markup_language.1726653180.txt.gz · Last modified: 2024/09/18 09:53 by kissa