ckportfolio.com - Website Elements via HTML

Website Elements via HTML

"Hello world"

Web pages are simply text files with special markings. Upon opening these text files on a web browser, however, these files are interpreted and rendered --- presenting itself as an interactive experience to the users.

While web browsers are responsible for plenty of heavy lifting (including trying to interpret your invalid code), we as developers do need to adhere to some rules.

Let's a try a quick Hello World exercise: it is important for you to refer to the example below and manually type the text to get a "feel" for coding.

Plenty of brackets and indents (created using tab key) in the above example. Here is a quick rundown:

  • <!doctype html> is a special marking, announcing to the browser that this is a webpage and should be treated as such
  • <html> and </html> indicate the start and the end of a web page, and are essential.
  • <head> and <body> sections respectively are responsible for under-the hood functionality and user-facing presentation. In short, <head> section is the "thinking portion," and <body> is the "physical portion."

You may have noticed that we are using a pair of identically named tags to indicate the start and the end of each section. This is a very important mannerism that applies to all aspects of coding, save for a few elements.

Previewing the website is easy. Upon saving your file (the asterisk next to the tab name should disappear), simply right click on the index.html in the "Files" window and select "Open in Browser" (if this doesn't work, simply locate the file in Finder / Explorer and drag into the browser):

Admittedly, nothing spectacular here: but notice that the tab title is as you have assigned under <title>, and <h1> tags seem to function as the first heading (as in MS Word) --- and you are absolutely right! Note that HTML was originally designed as a means to share text-based documents amongst researchers, and was partially inspired by available word processors.

Screencast Recording

https://drive.google.com/open?id=1pAt8hd-Oc-dPXcgCRuRS65G8_eemi4WO

Fin