imkoy

1. Having fun with HTML 😎

Motivated by the idea of having a space where I could share ideas, interests, and document my learning I start my HTML learning journey. As any other newbie I first started with a couple of youtube videos, they provide me with the basic on how to set up my website and the basics on HTML. Digging deeper I found resources such as html.com to be quite valuable as they offered indepth on specific information such as how to indent the first paragraph. Underneat a detailled deliniation of the things I used and learned are presented as well as functionalities I have been experimenting with.

1.1. Setting up a website with HTML

Building a website can be relatively straightforward. There are numerous free services available online that offer simple templates for users to begin writing and posting content. However, HTML provides users with a higher degree of customizability and freedom, it also offers new users glance into coding with HTML and CSS. The process of setting up a website typically involves three simple steps: acquiring a domain, deploying the website, and developing the content. To acquire my domain, I used porkbun.com, which cost me as little as $10 USD per year. For deploying the website, I utilized Netlify, a free platform that allowed me to link my static HTML hosted on GitHub to the imkoy.com domain. Having prior familiarity with GitHub made the process quite simple and straightforward. However, for individuals who do not have the time to learn HTML, platforms like Squarespace or Google Sites, which offer simplicity and high customizability, would be enough.

A website is similar to a house. It consists of a foundation, decoration, and functionality. The foundation corresponds to HTML, serving as the backbone and defining the main structure. HTML is responsible for housing the text you are currently reading as well as the formating of the text. In our analogy, HTML would be to the rooms within a house, the living room will be your main domain and the sub-branches of the website (e.g., www.imkoy.com/about) your rooms. CSS, on the other hand, handles decoration, enhancing the visual appeal and aesthetics of the website. Finally, functionality is achieved through JavaScript, enabling interactive features and dynamic behavior, similar to the utilities and systems that bring a house to life.

1.2. Editing your HTML

As mentioned previewsly, the website is hosted in GitHub and Netlify connects my repository to my site. My Netlify site is later deployed to my porkbun.com domain. To create my first page I created my first .html in the GitHub page named index.html. Here I experimented with multiple functionalities such as title headings, lists and types of text, tables, images, sound, buttons, and hyperlinks.

1.2.1. Bullet points and lists

Here we will explore how to create a bullet point list using simple HTML. To create the below list with bullet point I used li, if you would like to have the list with numbers you would have to use ol in between the li. Result:

1. First bold.
2. Second, italic.
3. Third, big.

        <ol>
        <li>First <b>bold</b>.</li>
        <li>Second, <i>italic</i>.</li>
        <li>Third, <big>big</big>.</li>
        </ol>

Fourth, small.

Fifth, _sub.

Sixth, ^sup.

• Sevent, ins.
• Eight, del.
• Ninth, mark.

1.2.2. Tables

To build a table in HTML you need to build arrays. First, we tell HTML we are building a table by using table. To build a column we use th and to build a row we use tr. Lets say we want to make a daily work schedule for a spanish restaurant, they open from monday to friday from 9am-5pm and are closed saturdays and sundays. First we would have to develop our columns and then work on each row. In text it would look like this:

<table bgcolor="black">
            <tr bgcolor="grey">
                <th>domingo</th>
                <th>lunes</th>
                <th>martes</th>
                <th>miércoles</th>
                <th>jueves</th>
                <th>viernes</th>
                <th>sábado</th>
            </tr>
            <tr bgcolor="lightgrey" align="center">
                <td>cerrado</td>
                <td>9-5</td>
                <td>9-5</td>
                <td>9-5</td>
                <td>9-5</td>
                <td>9-5</td>
                <td>cerrado</td>
            </tr>
        </table>

In practice that table would look like this:

1.2.3. Images and hyperlinks

Adding images to HTML is quite simple. You could call them from a URL or from your repository. In this example I will call an image from the GitHub repository located in a folder called images using img to call the image and href to provide an hyperlink to the image. The text code would look like the following:

<a href="https://www.amnh.org/exhibitions/frogs-a-chorus-of-colors/frog-fun-facts">
            <img src="images/frog.jpg" height="200" width="150">
        </a>

In practice it would look like the following (Click the img for bonus frog facts 🐸):

1.2.4. Buttons

To generate a button you can use button. To add a hyperlink to a button you can encapsulate the button in a. You can add a Javascript function to the button by using onClick to call a Javascript function, in this example the Javascript function will provide us with a popup! This is how it would look like:

<button onClick="alertButton()">Alert popup</button>

The alertButton() is the javascript function defined in a .js file. In practice it would look like the first of the following:

Alert popup non-functioning button Fancier button

1.2.6. iframe

The iframe element is used to embed a document from another source onto a HTML document. You could embed another webpage or another HTML onto your HTML website. It could be useful to embed advertisement onto your website. Lets begin by creating an iframe of the shrek.com website.

To change the dimensions you can add width and height. Lets do a width of 300 and height of 50 for this example.

Now lets make a test advertisement, to do this I will create a new .html file to store the ad information

Using iframe in practice with our second example would look like this:

<iframe src="https://www.shrek.com/" width="300" height="50"></iframe>

1.2.7. Forms

Here we are testing the generation of forms to potentially store or submit information. This could work with Passwords, emails, names, dates, phone numbers, quantities, titles, dropdowns... Whatever you can think of. All the information to be input needs to be stored into a .php placeholder. Currently this placeholder does not exist so the form will not store any information.

Just like we did with tables we need to encapsulate the form, to do this we use forms I use a combination of label to present what to input, input to create input box, select for the dropdown. input is versatile because it allows you to define what type of information to use and makes appropiate restrictions to it, for example type email would only allow you to input @.com text. I will not dive deeper into forms detail but feel free to follow this guide for more information. Example form: