HTML Development (1) Basic

From today, I’m going to start a side project for creating full stack web app. I’m going to make a web page with html, nginx and GO with CRUD function. And I will containerize the completed webapp and deploy them on the AWS EC2 instance by using Terraform IaC tool. I’m going to start configure html webpage first. This post follows the curriculum of “Certified Full Stack Developer Curriculum” from “freeCodeCamp”

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

This is the simple structure of the html file. there are <head> part and <body> part. you can put CSS or JS files, Type of Encoding, Name of the web site inside the <head> section. You can put articles or pictures inside the <body> section.

<h1> </h1>

<h2> </h2>
<p> </p>
<img />  'This is a void element'

<img src="https://www.test.com/test.jp" />

# By using this, you can see the alt message instead of the image. If there is something wrong with the src and image is not being displayed, content with alt will be displayed.
<img src="https://www.test.com/test.jpg" alt="This is a test image" />

# attribute is a value inside the opening tag of HTML element. 
<element attribute="value"></element>

#href specifies the URL of a link and the target specifies where to open the link. target="_blank" means to open a link in a new browser tab
<a href="https://www.naver.com/news" target="_blank">Visit naver</a>

# you can create checkbox by using this code
<input type="checkbox" checked />
<input type="checkbox" />

# you can create text box
<input type="text" />
<input type="text" disabled />

But you can’t build a complicated website with HTML only. You need to use CSS or JavaScript to do that since the HTML is only for the content and structure. You can use CSS for styling and JavaScript for adding interactivity.

# This is the full practice from the freecodecamp
<h1>Welcome XYZ Pet Adoption!</h1>
<p>Consider adopting a pet today. We have cats, dogs, rabbits and more.</p>

<h2>See our cats!</h2>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Two tabby kittens sleeping together on a couch.">

<h2>Adopt a cat!</h2>
<a href="/cats">Visit cats page</a>

<h2>Adopt a dog!</h2>
<a href="/dogs">Visit dogs page</a>

# link element is used to link to external stylesheets. rel attribute link the HTML and linked resource. href is to assign the URL. link element should be place inside the head element. By using preconnect, you can create an early connection to the value in href.
favicon is the icon which is displayed in the browser tab next to the site title.

<link rel="stylesheet" href="./styles.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="icon" href="favicon.ico" />

There is a pre-defined template for HTML which is called boilerplate. Let’s take a look at the example.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <mete name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>freeCodeCamp</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
  </body>
</html>

<!DOCTYPE html> : This part tells the browsers about the version of HTML you are using.

<!DOCTYPE html>
<html lang="en">
  <!--All other elements go inside here-->
</html>
In this part you can specify the language of the page.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!--Important metadata goes here-->
  </head>
  <body>
    <!--Headings, paragraphs, images, etc. go inside here-->
  </body>
</html>
In this part you can see the <head></head> and <body></body> sections. Inside the head section, you can see the metae elements which contains details like character encoding. With title element, you can determine the text appears in the browser tab or window. In body section, you can see contents in it.

<meta charset="UTF-8" />
what's UTF-8 ? it is a standardized character encoding widely used on the web. It supports every character in the Unicode character set.

YJS Virtual Tech Blog

recent posts

about