Institute of Information Science - University of Miskolc

User Tools

Site Tools

Trace:
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/23 09:27] – [Development Environment] kissatanszek:oktatas:techcomm:basics_of_the_hypertext_markup_language [2025/09/15 15:52] (current) – [Exercise] kissa
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). 
 + 
 +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 ==== ==== Development Environment ====
Line 40: Line 42:
 Copy the code from the next section, then save your HTML file (Ctrl+S). 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. If you change the content of the HTML file, the content will also be updated in the browser.+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 ==== ==== Basic Structure of an HTML Document ====
  
Line 53: 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 91: 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>
  
Line 151: 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>
 <img src="imgs/main_building.png" alt="Main Building of the University of Miskolc"> <img src="imgs/main_building.png" alt="Main Building of the University of Miskolc">
 </code> </code>
 +
 +Try downloading an image from the internet, and using a relative URL in your HTML document!
  
 ==== Ordered and Unordered Lists ==== ==== Ordered and Unordered Lists ====
Line 211: Line 222:
 ==== Exercise ==== ==== Exercise ====
  
-Create an introduction page on your favorite topic (music, film, product, etc.) using headings, 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.1727083667.txt.gz · Last modified: 2024/09/23 09:27 by kissa