HTML_1_Introduction

What is a website?

A website is a collection of web pages and related content that is identified by a common domain name and published on at least one web server. 
Web advertising is any form of Internet-based marketing. 
Nowadays, websites become the tools or services for people in our working environments due to the digital transformation.

Why we should use?

  • First impression as a real business
  • Online Presence 24/7
  • Information Exchange Easily
  • Market Expansion
  • Advertising
  • Use anytime, anywhere, any devices

Basic Website Language

  1. HTML stands for Hyper Text Markup Language, which is the most widely used language on Web to develop web pages.
  2. CSS stands for Cascading Style Sheet, which is used to design the web page to be more attractive.
  3. JS stands for JavaScript, which is used to make web pages interactive and dynamic.

What is HTML?

  • HTML stands for Hyper Text Markup Language
  • HTML is the standard markup language for creating Web pages
  • HTML describes the structure of a Web page
  • HTML consists of a series of elements
  • HTML elements tell the browser how to display the content
  • HTML elements label pieces of content such as "this is a heading", "this is a paragraph", etc.

HTML Structure 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>










HTML Document

  • The <!DOCTYPE html> declaration defines that this document is an HTML5 document
  • The <html> element is the root element of an HTML page
  • The <head> element contains meta information about the HTML page
  • The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
  • The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
  • The <h1> element defines a large heading
  • The <p> element defines a paragraph
HTML Editors and Web Browsers

Web pages can be created and modified by using professional HTML editors.
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.


HTML Block and Inline Elements

Block-level Elements

A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.
A block-level element always takes up the full width available (stretches out to the left and right as far as it can).
Two commonly used block elements are: <p> and <div>.
The <p> element defines a paragraph in an HTML document.
The <div> element defines a division or a section in an HTML document.
The <p> element is a block-level element.
The <div> element is a block-level element.

Inline-level Elements

An inline element does not start on a new line.
An inline element only takes up as much width as necessary.
This is a <span> element inside a paragraph.
<span>Hello World</span>


A block-level element always starts on a new line and takes up the full width available
An inline element does not start on a new line and it only takes up as much width as necessary
The <div> element is a block-level and is often used as a container for other HTML elements
The <span> element is an inline container used to mark up a part of a text, or a part of a document

Comments

Post a Comment

Popular posts from this blog

HTML_6_Media

Image
Media Image <img> To add an image into the page you need to use an <img> element. This is an empty element (which means there is no closing tag). It must carry the following two attributes: src This tells the browser where it can find the image file. This will usually be a relative URL pointing to an image on your own site.  alt This provides a text description of the image which describes the image if you cannot see it. title You can also use the title attribute with the <img> element to provide additional information about the image. Most browsers will display the content of this attribute in a tooltip when the user hovers over the image. <img src="car.jpg" alt="car" title="car" /> <figure> Images often come with captions. HTML5 has introduced a new <figure> element to contain images and their caption so that the two are associated. <figcaption> The <figcaption> element has been added to HTML5 in order to a...
Read more

HTML_7_Link

Image
Link Links are created using the <a> element which has an attribute called href.  The value of the href attribute is the page that you want people to go to when they click on the link.  Users can click on anything that appears between the opening <a> tag and the closing </a> tag and will be taken to the page specified in the href attribute. <a> other-sites.html HTML Link Type Link to other website Link to other website with new tab Link to email Link to Top (ID) and Bottom Link to Pages (Same folder, Child folder, Parents folder and so on) Link to Other Website <a href="https://www.google.com/">Google</a> Link to Other Website with New Tab <a href="https://www.google.com/" target="_blank">Google New Tab</a> Link to Email <a href="mailto:coffeehouse@gmail.com">Email Us</a> Link to Other Website <a href="https://www.google.com/">Google</a> Link to Other Website with N...
Read more