Institute of Information Science - University of Miskolc

User Tools

Site Tools

Trace: • http_protokol • vba_tesztkerdesek • software_integration_strategies • evolution_of_software_integration_methods • integration_based_on_tcp_ip_sockets • basics_of_the_hypertext_markup_language • java_-_remote_method_invocation
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/11 06:38] – [7. Images] kissatanszek:oktatas:techcomm:basics_of_the_hypertext_markup_language [2024/09/25 07:30] (current) – [Images] 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 15: Line 15:
 </code> </code>
  
-The tags such as ''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 different meanings to present 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.
  
-An HTML document consists of three main parts: ''<html>'', ''<head>'', and ''<body>''.+==== 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:
  
 <code XML> <code XML>
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>
 </code> </code>
  
-The ''head'' section contains metadata about the page, such as the title (''<title>'') and the icon (''<link rel="icon">'').+The ''<!DOCTYPE>'' tag is used to declare the document type and version of HTML being used. It ensures that the web browser renders the page correctly by telling it what type of HTML (e.g., HTML5) the document is written in. More information is [[https://www.w3schools.com/tags/tag_doctype.asp|available here]].
  
-<code XML> +The ''html'' tag encapsulates the whole content, it is the root of the HTML document.
-<head> +
-    <title>Hello World</title> +
-    <link rel="icon" href="favicon.ico" type="image/x-icon"> +
-</head> +
-</code>+
  
-==== 3. Comments ====+The ''head'' section contains metadata about the page, such as the title between ''<title>'' tags. 
 + 
 +The ''body'' section contains the content of the page. 
 + 
 +In the following, we can learn about the HTML elements that can be used in the ''body'' of the document. 
 + 
 +==== 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 55: Line 81:
 </code> </code>
  
 +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 67: 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 91: Line 124:
 </code> </code>
  
 +''<br>'' inserts a line break in the text.
  
-==== 6. Links ====+''<hr>'' creates a horizontal line, often used to separate content. 
 + 
 +''<small>'' reduces the size of the text, typically used for disclaimers or footnotes. 
 + 
 +''< sup>'' displays text as superscript, raising it above the baseline. 
 + 
 +''< sub>'' displays text as subscript, lowering it below the baseline. 
 + 
 +''< span>'' groups inline elements to apply styles or manipulate them with JavaScript. 
 + 
 +''< div>'' defines a division or section in an HTML document, often used to group multiple elements together for layout or styling purposes. 
 + 
 +==== 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 112: 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 159: 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, product, 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.1726036683.txt.gz · Last modified: 2024/09/11 06:38 by kissa