Lab Class: HTML basic
This is the really first lab class that goes deeply into web programming. first thing that we learn is HTML. HTML is the main language of web programming, it defines the structure of a page only. There is another 3 term that you should know what it is for. first, web server, it is used to communicate the page structure to the browser. and then, web browser itself that is used to render the pages. last, Cascading Style Sheet or known as CSS is for styling the page however we wanted.
when you want to make an HTML file, you will use a normal text file from notepad that saved as HTML(.html/.htm) as it extension. HTML documents are text files made up of HTML element that defined using HTML tags.
HTML tags characteristic:
- surrounded by angle brackets (< or >)
- usually come in pairs like <html> and </html>
- the first one is the start tag
- the second one is the end tag
- the text between the tags is the element content
- not case sensitive
- note: in HTML5, all tags must be in lower case
Basic HTML tags:
- html: defines HTML document
- head: define doc title
- body: defines doc body
- h1 to h6: for header 1 to header 6
- p: defines paragraph
- br: for line break
- hr: for horizontal rule
HTML elements is the root element of the document. HTML elements begin and end with html tags. the structure of HTML documents are divided into two, head that contain title and body that contains the information. below is the example code and result for basic HTML.
example code:
<html>
<head>
<title> page title </title>
</head>
<body>
<h1> this is your content </h1>
</body>
</html>
example result:
that is the most basic code for HTML and the looks. there is also something called HTML syntax, which is an element in HTML represents a structure. the simplest example is div, that usually used to divide the content based on it style.
HTML headings and tables is one of the simplest way to style the page. here is the example of code and the result:
heading code:
<html>
<head>
<title> page title </title>
</head>
<body>
<h1> this is you content, using heading 1 </h1>
<h2> this one using headings 2 </h2>
<h3> this one using headings 3 </h3>
<h4> this one using headings 4 </h4>
<h5> this one using headings 5 </h5>
<h6> this one using headings 6, the smallest heading </h6>
</body>
</html>
heading result:
for complex styling of the page, it is the best to use CSS instead of HTML only.
Comments
Post a Comment