Главная » Языки программирования

Mr. Camel

Содержание
  1. HTML Introduction
  2. What is HTML?
  3. A Simple HTML Document
  4. Example
  5. My First Heading
  6. Example Explained
  7. What is an HTML Element?
  8. Web Browsers
  9. HTML Page Structure
  10. This is a heading
  11. HTML History
  12. HTML Web Page Examples with Source Code
  13. HTML Web Page Example 1
  14. HTML WebPage Example 2
  15. HTML Code Example 3 (Offer Page)
  16. HTML Code Example 4
  17. Conclusion
  18. HTML Basic Examples
  19. HTML Documents
  20. Example
  21. My First Heading
  22. The Declaration
  23. HTML Headings
  24. Example
  25. This is heading 1
  26. This is heading 2
  27. This is heading 3
  28. HTML Paragraphs
  29. Example
  30. HTML Links
  31. Example
  32. HTML Images
  33. Example
  34. How to View HTML Source
  35. View HTML Source Code:
  36. Inspect an HTML Element:

HTML Introduction

HTML is the standard markup language for creating Web pages.

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», «this is a link», etc.

A Simple HTML Document

Example

My First Heading

My first paragraph.

Example Explained

  • The declaration defines that this document is an HTML5 document
  • The element is the root element of an HTML page
  • The element contains meta information about the HTML page
  • The element specifies a title for the HTML page (which is shown in the browser’s title bar or in the page’s tab)
  • The 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 element defines a large heading
  • The

    element defines a paragraph

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

The HTML element is everything from the start tag to the end tag:

Note: Some HTML elements have no content (like the
element). These elements are called empty elements. Empty elements do not have an end tag!

Web Browsers

The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.

A browser does not display the HTML tags, but uses them to determine how to display the document:

View in Browser

HTML Page Structure

Below is a visualization of an HTML page structure:

This is a heading

This is another paragraph.

Note: The content inside the section will be displayed in a browser. The content inside the element will be shown in the browser’s title bar or in the page’s tab.

HTML History

Since the early days of the World Wide Web, there have been many versions of HTML:

Year Version
1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML
1993 Dave Raggett drafted HTML+
1995 HTML Working Group defined HTML 2.0
1997 W3C Recommendation: HTML 3.2
1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
2008 WHATWG HTML5 First Public Draft
2012 WHATWG HTML5 Living Standard
2014 W3C Recommendation: HTML5
2016 W3C Candidate Recommendation: HTML 5.1
2017 W3C Recommendation: HTML5.1 2nd Edition
2017 W3C Recommendation: HTML5.2

This tutorial follows the latest HTML5 standard.

Источник

HTML Web Page Examples with Source Code

In this article, we are going to see some HTML web page examples with source code. We will also see some of the key points to learn how to create these web pages.

HTML Web Page Example 1

This is an example of a simple HTML web page that shows the profile of a professional camel.

Here is how the camel profile is designed in HTML:

  1. Container — The complete HTML web page is wrapped in a container. The container is a div element with the class container .
  2. Header — Inside the container, we have a header element that contains the logo and the navigation menu.
  3. Aside — Aside contains the profile picture and other navigational links.
  4. Main — The main element contains the profile information. Like the name, the career, the skills, the contact form, etc.
  5. Footer — The footer contains copyright information.

Here is the complete code of the camel profile:

@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap'); body < margin: 0; box-sizing: border-box; >.container < line-height: 150%; >.header < display: flex; justify-content: space-between; align-items: center; padding: 15px; background-color: #e9e9e9; >.header h1 < color: #222222; font-size: 30px; font-family: 'Pacifico', cursive; >.header .social a < padding: 0 5px; color: #222222; >.left < float: left; width: 180px; margin: 0; padding: 1em; >.content < margin-left: 190px; border-left: 1px solid #d4d4d4; padding: 1em; overflow: hidden; >ul < list-style-type: none; margin: 0; padding: 0; font-family: sans-serif; >li a < display: block; color: #000; padding: 8px 16px; text-decoration: none; >li a.active < background-color: #84e4e2; color: white; >li a:hover:not(.active) < background-color: #29292a; color: white; >table < font-family: arial, sans-serif; border-collapse: collapse; width: 100%; margin: 30px 0; >td, th < border: 1px solid #dddddd; padding: 8px; >tr:nth-child(1) < background-color: #84e4e2; color: white; >tr td i.fas < display: block; font-size: 35px; text-align: center; >.footer
Mr. Camel
About Me
I don't look like some handsome horse, but I am a real desert king. I can survive days without water.
My Career
I work as a web developer for a company that makes websites for camel businesses.

How Can I Help You?
SKILL 1SKILL 2SKILL 3Cleaning kaktus in your backyardStoring some fat for youTaking you through the desertEmail: 
Mobile:

Here is the result of the code above:

HTML web page example 1

HTML WebPage Example 2

This is the second example of an HTML web page. This is a simple error 404 page which is shown when the user tries to access a page that does not exist.

This is a very simple webpage that shows the error 404 page on the screen and gives a link to return to the homepage.

To design an error 404 page you need to use the following steps:

  1. Create a div element that covers the whole page set height: 100vh .
  2. Give it a background image that suits the 404 error.
  3. Style your basic text and link elements with CSS.
       body < margin: 0; box-sizing: border-box; >.container < height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; background: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, .1)), url('https://images.unsplash.com/photo-1595624871930-6e8537998592?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=871&q=80'); background-size: cover; background-position: center; background-repeat: no-repeat; >h1 < font-size: 10rem; color: #fff; text-transform: uppercase; font-weight: 700; margin-bottom: 1rem; >h2 < font-size: 2rem; color: #fff; text-transform: uppercase; font-weight: 700; margin-bottom: 1rem; >p < font-size: 1.5rem; color: #fff; font-weight: 700; margin-bottom: 1rem; >a 
404 
Page not found
 
The page you are looking for does not exist.
 
Visit Homepage

Here is the result of the code in example 2.

HTML web page example 2

HTML Code Example 3 (Offer Page)

In this HTML code example we will create offer page. This is a simple newsletter signup page.

Here is the list of steps to create a newsletter signup page:

  1. First, we need to create the HTML structure of the page. We will use the tag to wrap the content of the page. Then, we will create two sections: one for the intro and one for the sign-up form.
  2. Next, we will style the page using CSS. We will use the display: flex property to align the content of the page. We will also use the min-height property to make sure that the page is always fully visible.
  3. Then, we will style the intro section.
  4. Next, we will style the sign-up section.
  5. Finally, we will style the form. Look at the complete code below to see how we did it.
          
  
Get up to 50% off on all our products and services. Hurry up, the offer ends in 24 hours.
 
  
! 
 
! 
 
! 
 
! 
 
Terms and Services

Here is the result of the code in example 3.

HTML web page example 3

HTML Code Example 4

In the fourth example, we are going to create a testimonial page that shows the reviews of the customers along with their profile pictures, name and designation.

The basic idea will be to create HTML section first and then styling it with CSS.

The reviews and all its details will be stored in an array and then we will loop through the array to display the reviews.

Here is the complete code for the testimonial page.

Complete HTML code for the testimonial page

         
Our Reviews

Here is the output of the above HTML code for testimonials:

Conclusion

This brief guide includes HTML web page examples with source code. We have learned how to create a basic HTML web page with 2 different examples. We have also learned how to create a basic CSS style sheet and how to use it on our HTML web page.

If you want a detailed explanation of a portfolio site then visit the HTML code for homepage.

Источник

HTML Basic Examples

In this chapter we will show some basic HTML examples.

Don’t worry if we use tags you have not learned about yet.

HTML Documents

All HTML documents must start with a document type declaration: .

The HTML document itself begins with and ends with .

The visible part of the HTML document is between and .

Example

My First Heading

My first paragraph.

The Declaration

The declaration represents the document type, and helps browsers to display web pages correctly.

It must only appear once, at the top of the page (before any HTML tags).

The declaration is not case sensitive.

The declaration for HTML5 is:

HTML Headings

HTML headings are defined with the to tags.

defines the most important heading. defines the least important heading:

Example

This is heading 1

This is heading 2

This is heading 3

HTML Paragraphs

HTML paragraphs are defined with the

tag:

Example

This is a paragraph.

This is another paragraph.

HTML links are defined with the tag:

Example

The link’s destination is specified in the href attribute.

Attributes are used to provide additional information about HTML elements.

You will learn more about attributes in a later chapter.

HTML Images

HTML images are defined with the tag.

The source file ( src ), alternative text ( alt ), width , and height are provided as attributes:

Example

How to View HTML Source

Have you ever seen a Web page and wondered «Hey! How did they do that?»

View HTML Source Code:

Right-click in an HTML page and select «View Page Source» (in Chrome) or «View Source» (in Edge), or similar in other browsers. This will open a window containing the HTML source code of the page.

Inspect an HTML Element:

Right-click on an element (or a blank area), and choose «Inspect» or «Inspect Element» to see what elements are made up of (you will see both the HTML and the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens.

Источник

Читайте также:  All java mobile application
Оцените статью