W5-2: RWS Ch.1 Intro to Web Scraping

2.2 Syntax rules

1. Tags, elements, and attributes

Elements

<title>First HTML</title>

Attributes

<a href="https://en.wikipedia.org/wiki/Main_Page">Link to Wikipedia!</a>

https://en.wikipedia.org/wiki/Main_Page

2. Tree structure

<html>
  <head>
    <title>First HTML</title>         
  </head>
  <body>
    <p>I am your first HTML file!</p>
  </body>
</html>

A tree perspective on HTML

3. Comments

HTML offers the possibility to insert comments into the code that are not evaluated and therefore not displayed in the browser.

<!-- I am a comment.
  I can span several lines and I am able to store additional 
    content that is not displayed by the browser. -->

4. Reversed and special characters

  <p> &lt;p&gt; </p>

HTML entities

|Character|Entity name|Explanation|
|   "     |  &quot;   |quotation mark|
|   '     |  &apos;   |apostrophe|
|   &     |  &amp;    |ampersand|
|   <     |  &lt;     |less than|
|   >     |  &gt;     |greater than|
|         |  &nbsp;   |non-breaking space|

<p>

5. Spaces and line breaks

  <p>Writing     code        is           poetry</p>

  <p>Writing&nbsp;code&nbsp;is&nbsp;poetry</p>
  
  <p>Writing<br>code<br>is<br>poetry</p>

Writing code is poetry

Writing
code
is
poetry

2.3 Tags and attributes

The anchor tag <a>

The tag <a> is what turns HTML from just a markup language into a hypertext markup language by enabling HTML documents to link to other documents.

- Linking to another document

The metadata tag <meta>

The <meta> tag provides meta information on the HTML document.

- Specifying keywords

<meta name="keywords" content="Automation, Data, R">

- Declaring character encoding

<meta charset="ISO-8859-1"/>

- Defining character encodings

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

The external reference tag <link>

The <link> tag is used to link to and include information and external files.

- Specifying style sheets to use

<link rel="stylesheet" href="htmlresources/awesomestyle.css" type="text/css"/>

- Specifying the icon associated with the website

<link rel="shortcut icon" href="htmlresources/favicon.ico" type="image/x-icon"/>

Emphasizing tags <b>, <i>, <strong>
- Text with bold type setting
- Text set in italics
- Text defined as important
The paragraphs tag <p>
Heading tags <h1>, <h2>, <h3>, …
Listing content with <ul>, <ol>, and <dl>
The organizational tags <div> and <span>

While <div> and <span> themselves do not change the appearance of the content they enclose, these tags are used to group parts of the document.

<div> defines groups across lines, tags, and paragraphs
<span> used for in-line grouping
CSS div.happy {color:pink;font-family:“Comic Sans MS”;font-size:120%} span.happy {color:pink;font-family:“Comic Sans MS”;font-size:120%}
```
  <link href="htmlresources/awesomestyle.css" rel="stylesheet" type="text/css"/>
```

The purpose of CSS is to separate content from layout to improve the document’s accessibility. Defining styles outside of an HTML and assigning them via the class attribute enables the web designer to reuse styles across elements and documents. This enables developers to change a style in one single place–within the CSS file–with effects on all elements and documents using this style.

Table tags <table>, <tr>, <td>, and <th>

new lines with <tr>
<td> for defining cells
<th> for header cells

Summary

What we get presented when surfing the web is an interpreted version of the marked up source code that holds the content.
Tags form the core of the markup used in HTML and can be used to define structure, appearance, and content.

Assignment

Write down an basic HTML document. You may consult with the examples of HTML documents available on our E-Class page. The detailed instruction will be announced on E-Class.