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 10:14] – 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 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.
Line 119: Line 150:
  
  
-==== 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 129: Line 160:
 In this example, ''src'' contains an **absolute URL**, the image will be downloaded from the server behind the www.uni-miskolc.hu domain. 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'', we can refer to it as:+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> <code XML>
Line 135: Line 166:
 </code> </code>
  
-==== 8. Ordered and Unordered Lists ====+Try downloading an image from the internet, and using a relative URL in your HTML document! 
 + 
 +==== Ordered and Unordered Lists ====
  
 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. 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.
Line 157: Line 190:
 </code> </code>
  
-==== 9. Tables ====+==== Tables ====
  
 To create tables, use the following elements: To create tables, use the following elements:
Line 187: Line 220:
 ''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.). ''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.1726654473.txt.gz · Last modified: 2024/09/18 10:14 by kissa