I took the <Intro to HTML & CSS> workshop provided by CUNY GCDI. I am taking <Intro. to Javascript> class this semester, so I thought the workshop would help me understand how webpages are structured and created. I didn’t know the basic concepts of these two tools used for websites. Now I understand HTML & CSS in a very simple way: 1) HTML provides the structure of a webpage, whereas 2) CSS controls the style of a webpage.
In the workshop, I tried to make a simple webpage with a basic format of HTML and CSS.
1. Visual Studio Code & the base HTML file_index.html
First, I have downloaded VSCode. This code editor is handy for coding because it supports many coding languages. Also, I can see the precise structure of the coding -even though I don’t fully understand the meaning of coding- because each color distinguishes codes, texts, and syntax.
Plus, I got a basic template for HTML, which consists of Doctype, HTML, head, and body. With the template, I started making a webpage.
2.HTML
Again, HTML provides the structure of a webpage. The basic grammar(?) for HTML is using opening and closing tags: < > & </>
The tags include contents, namely the text you put in.
I filled the basic template with text, a picture, and links.
⇓
I can see this code on a webpage.
⇓
You can see that this page is boring and has no style. Now I can put some touches on it with CSS.
3.CSS
CSS sets the rules of a webpage: color, font-family, font-size, font-weight, and text-align.
CSS can be integrated into my HTML. In the workshop, I created external integration in a separate document by adding the code below:
<link rel=”stylesheet” href=”style.css”>
On a separate page, I changed the style of content in HTML.
⇓
This CSS code modifies the style of content.
⇓
The workshop was for a beginner, but it still had some tricky parts to follow – I didn’t know how to add my picture in HTML. I always use the uploading window when I click the upload button on a website. -, but I got a broad picture of how websites are created and operated. In addition, with HTML & CSS, I can make, build, and design a new website. (Can I now call myself a digital humanist?)
