In todays class we learnt the basics of HTML, which stands for Hyper Text Markup Language. HTML is the code language readable by browsers so that is can be used to create webpages. It gives the basic structure of a webpage, and it is recommended to be used with CSS and Javascript to make the webpage fully responsive. Here is what a webpage looks like only using HTML:
As you can see, it looks very bland and unattractive, but HTML is crucially important for making the website, giving it a basic structure and making information visible on a browser, which is it’s main purpose.
HTML has some commonly used tags. These are: heading, paragraph, image, list, etc. Each tag has a unique function for the webpage. When using HTML tags, you must have an opening tag and a closing tag. Here is some examples of HTML tags: <p></p>, <h1></h1>.
We were then given a body of text about Women in Design, and using HTML, we had to give it a structure with what we had learnt.
I began by declaring the document type with <DOCTYPE html>, then set the language to english with <html lang=”en”>. Then within the head of the document, I copied some code from slack to make the file accessible for browsers, and also gave it a name using <title>. I then linked it to my CSS sheet, so that the CSS would apply to the HTML file. I then added a navigation bar using a unordered list <ul>, to create a navigation bar that would show each of the artists and text for contact.
I then added an image for the headline, using <img src>. Then using <h1>, I added a heading, also using <p> for a subheading and also for the intro.
In total there are 3 paragraphs in the design, so I used this code 3 times altogether. I used <div> to separate each one, and used class to make them accessible for CSS. Then I used <h3> for a subheading, and <img src> for an image of the artist, with the class being “portrait” as it is a portrait of the artist. For each break in the text I used <p> to make a paragraph, and at the end I added an image of one of the artists work. I done this 3 times as there was 3 different artists.
Paul then sent us more text to be put into our webpage, and it included some other designers. I used <h3> again for a subheading, and used an unordered list <ul>, to list each designer. I then added another paragraph for a closing piece of information, using <p>.
For a footer, I added some contact information, including my Notion blog, E-mail, and some socials. I used <a>, which is used for anchoring an external piece of information into the HTML sheet, and inside that was href=, which is the source of that information. (In this case, my Notion and Outlook). Within the anchor, I added a name that would be seen instead of the URL when on the browser. Finally I added icons for social media using <img src>, and then closed off the HTML sheet with the <html> tag.
