Introduction to HTML ===================== In this section, we will explore HTML and how it is used to create website. We will better understand the structure of HTML, certain paradigms to follow, and explore ways to personalize and create a website. After going through this module, students should be able to: * Describe how HTML works for creating websites. * Help define a layout of a website. * understand different features of HTML such as bullets, styling, and using images. Setup and Installation ---------------------- We will setup a local server so we can view the changes we make. A website is nothing more than a set of files that are read by and sent to a client to render a website. With this in mind, it is good to consider the structure of our website. In general a folder structure can be like the one denoted below: 1. ``sitename`` **folder** - A folder containing all the source code for a web application. 2. ``index.html`` - Genreally contains the homepage content, including text and images. Contained within the ``sitename`` folder. 3. ``images`` **folder** - Folder containing any images that will be rendered on the website. Contained within the ``sitename`` folder. 4. ``styles`` **folder** - Folder containing *CSS* code to style our website. Contained within the ``sitename`` folder. 5. ``scripts`` **folder** - Contains *Javascript* code for our website. Contained within the ``sitename`` folder. Create a folder named ``newsite``. Then within that folder create the three previously mentioned folders. Also copy the ``index.html`` from the git repo `here `_ and place it into the folder. Once completed your stucture should look similar to the one shown below: .. code-block:: console [terminal]$ cd newsite [terminal]$ ls images index.html scripts styles It's okay to not understand what these folders do just yet. The following explanations will give you a better understanding of what goes into each of these folders/files. Python3 comes with a with a module for creating a simple `HTTP server `_. This allows you the ability to create a simple webserver for a specific directory. This is particularly useful if you want to test more than just the layout of your site, but also load javascript files and run those within the website. To create a simple http server for our project, navigate to the directory and then run the following command: .. code-block:: console [terminal]$ cd newsite [terminal]$ python -m http.server Once your server is up and running, navigate to http://localhost:8000/ to view your website. You should see a blank page with the text ``Hello world!`` .. figure:: ./images/helloworld.png :width: 600px :align: center Hello World Webpage .. note:: The command for python2 is a little different: ``python -m SimpleHTTPServer`` Can you take a guess why we don't have to specify our `index.html` file in our web url? HTML element ------------ HTML, or **H**\yper **T**\ext **M**\arkup **L**\anguage, is exactly what is sounds like. It is a *markup* language that defines the structure of the content, in this case the content for a website. It consists of a series of **elements** which you use to wrap around different parameters of the content to make them appear a certain way. Elements are created using **tag**\s that specify the type of element. We will explore some of the common elements found in HTML. Say we are a delivery company, and we wanted to modify the text in our `Hello World!` text inside our ``index.html`` to be our motto instead. .. code-block:: html :linenos: Our crew is replaceable, your package isn't! If we just had this simple sentence then we could insert it into a **paragraph** tag, which is denoted by using the **p** tag. .. code-block:: html :linenos:

Our crew is replaceable, your package isn't!

There are 4 main parts of our HTML element: 1. **Opening Tag** - The name of the tag we like to use in our case ``

``. This is where the content for this particular tag starts. 2. **Closing tag** - The same as the opening tag except it includes an extra slash to denote it is the closing tag, in our case ``

``. This is where the content for this tag ends. 3. **Content** - This is what we place inside of our tag. In our case it is the sentence ``Our crew is replaceable, your package isn't!``, but it can get anything, including other tags. 4. **Element** - This is the combination of everything. This includes our opening and closing tag, and content. Our element would be ``

Our crew is replaceable, your package isn't!.

`` Elements can also have `attributes`, like so: .. code-block:: html :linenos:

Our crew is replaceable, your package isn't!

Here ``class="title"`` would be our attributes. You can think of attributes as extra information about the element that don't appear in the actual content, but change the element. `class` would be the **attribute** name, and `title` would be the attribute **value**. An HTML element can have multiple attributes that are space separated, but all follow the same, or similar format, as the previous example. Attributes can be set with either single ``'`` or double ``"`` quotations. It is really up to the developer(s) which they prefer, but it is good practice to remain consistent to not confuse anyone looking at the source code. .. note:: Some elements may have **boolean** attributes. These may not be followed by quotations mark, such as the **hidden** attribute: ````. This would work just the same if our attribute was ``hidden="true"``. Nesting Elements ~~~~~~~~~~~~~~~~ Other elements can be placed inside of others called **nesting**. For example, say we wanted to use the ```` tag to make part of our text bold. We could nest it within our ``

`` tag like below. Give it a try and see what it does. .. code-block:: html :linenos:

Our crew is replaceable, your package isn't!

.. warning:: Always make sure that those elements that have an opening and closing tag are properly closed. Otherwise you may get an error. Void Elements ~~~~~~~~~~~~~ Some elements are also known as **void** elements where they do not have content. All the information in the tags is what is used for rendering the element. For example, if we wanted to use the ```` tag to insert an image into our page. We could place it just below our ``

`` tag. First copy the image `here `_ into your ``images`` directory. Once it is there then place the following tag below: .. code-block:: html :linenos:

Our crew is replaceable, your package isn't!

My test image The two attributes in the ``img`` tag contain all the information necessary for our image, and you will notice that a **/** is at the end of our tag. There is no content because no text, elements are needed to render the image, everything is taken care of by the tag alone. Anatomy of HTML Document ------------------------ Up to now we have only been messing with content inside of the ```` of our file. But if you look at the complete file there are multiple other elements spread through it. .. code-block:: html :linenos: Unnamed Title ................ Let's take a look at what each of these tags do: - ```` - This is an arachaic statement that is simply required for it to run. When HTML first started it was good practice to define a doctype to automatically apply rules to test for errors in a file. - ```` - This element wraps all content for the page and is sometimes known as the **root** element. A `lang` attribute may be included to specify the language of the website. - ```` - This acts as a container for all other content for the website/webpage that is **not** content you want to show up. This includes things like page descriptions, titles, CSS javascript files among other options. - ```` - This element sets the character encoding standard for our webpage, which in this case is **UTF-8**. This is the usual setting and is best to set to avoid possible errors. - ```` - Sets the title of your page, which appears in the browser tab page, or also the bookmark when saved. - ```` - Contains `all` content meant to shown on the website including text, images, videos, anything you can think of! Images ------------------------ Turning back to our `img` element, this element can be used for rendering images on our website. .. code-block:: html :linenos: My test image From it we see there are two attributes: **src** and **alt**. **src** contains the path to the image file we wish to render. The **alt** attribute is used as a descriptive text for users who cannot see the image. This can be for those who are visually impaired that use screen readers, or perhaps the image is no longer displaying and the **alt** text acts as a backup. Try changing the path for the **src** to something wrong and see what happens. What happens if you try changing the src to a link to a picture instead of file on your computer? You can learn about the other attributes that are available for the **img** here https://www.w3schools.com/tags/tag_img.asp. Exercise 1 ~~~~~~~~~~ Now that you have a general understanding of how HTML works, it's time to be creative. Modify your **index.html** based on the parameters listed below: 1. Create a new website. You can use the skeleton of everything that was originally in the **index.html** file. #. Change the title to whatever title you like for your website. #. Add a **p** tag with a description of your website. #. Add an image to your website. Use the previous provided link to specify the width and height of your **img** tag. So we have details about our website, but we also like to give it more structure than just the two tags we know now. Text markup ----------- Certain elements allow to to specify when there are **headings** on your webpage. You can think of this similar to a book or article where subsections have smaller titles to specify each section. HTML contains 6 total levels of header sizes, though most of the time only 3 - 4 are used. .. code-block:: html :linenos:

Biggeest text/title

first subheading

second level subheading

inception level subheading

.. note:: An HTML **comment** is shown above with the following style: ```` As we saw before ``p`` elements are used for paragraphs of text. Try adding different header types to your ``index.html`` file to see how they look. Lists ~~~~~ Lots of text on website will end up using some form of lists. HTML has two types of elements for different types of List. 1. **Unnordered List** - These are lists in which order does not matter, or no sense of numbering is valuable for the list being displayed. #. **Ordered List** - Lists in which order does matter, such as recipes. Imagine we wanted to replace all the content in our``body`` element with a list. What happens if you just use a ``p`` element? .. code-block:: html :linenos:

Do my homework. Then play video games. Finally eat dinner.

The text would just continue to be rendered as if it is all on one line. Even if you try adding spaces, new lines, it will still be on the same line. This is because the HTML parser that browsers use reduces all sequences of whitespaces and new lines into a single space when rendering. Whitespace however is user to still place in your code for readability. Just be sure to stick to a format so as not to confuse you are any other developers. HTML has 2 elements for each type of List: ``