Mr. Camel

@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: 
Enter your message

Here is the result of the code above:

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 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 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

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.

Источник

HTML Tutorial

In this HTML tutorial, whether you’re a beginner or a professional, this tutorial covers everything you need to know to learn HTML, from the basics to advanced. Providing step-by-step instructions for easy learning, it will help you become proficient in HTML.

HTML stands for HyperText Markup Language. It is used to design the web pages. With the help of HTML, you can create a complete website structure. HTML is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages and markup language defines the text document within the tag that define the structure of web pages.

Why HTML is used?

HTML is used to create the structure of web pages and website that are displayed on the Internet. HTML basically contains Tags and Attributes that are used to design the web pages. Also, we can link multiple pages using Hyperlinks.

HTML Basic Structure of Web Page

The basic structure of an HTML page is laid out below. It contains the essential building-block elements (i.e. doctype declaration, HTML, head, title, and body elements) upon which all web pages are created.

HTML Basic Tags

Example: This is the basic example of HTML that display the heading and paragraph content.

HTML

         
Welcome to GeeksforGeeks
 
A computer science portal for geeks
   

Complete References

HTML Interview Questions

HTML Practice Quiz Sets

HTML Cheat Sheet

HTML Cheat Sheet is a simple, and quick reference list of basic HTML elements and attributes. The purpose of this Cheat Sheet is to provide you with some quick accurate ready-to-use code snippets and necessary HTML tags and attributes.

HTML Examples

HTML examples contains a wide collection of HTML programming examples. The HTML examples are categorized based on the topics including hyperlinks, forms, tables, frames, and many more.

Learn more about HTML

• Introduction
• HTML5 Introduction
• HTML Hex Color Codes
• HTML Charsets
• HTML URL Encoding
• Most commonly used HTML tags
• Structure of HTML Document
• HTML Form Design
• Design your First Website in Just 1 Week
• Simple Portfolio Website Design
• Design a Portfolio Gallery
• Design a web page
• Top 10 Projects For Beginners
• 10 Best HTML Coding Practices You Must Know
• Design a Login Form to an Image using HTML and CSS

Источник

Learn HTML Basics: HTML Practical Examples For Beginners

Learn the basics of HTML using simple & practical examples. In this post you get to see how HTML works step by step on all the HTML tags.

1. What is HTML?
2. How HTML works: Introduction to HTML
3. Tools for writing HTML
4. Basic html elements and tags tutorial
   — Basic HTML Template — Headings- Paragraphs
5. Other text formating using HTML
6. Creating sections using Div
7. Creating sections using HTML5 Semantic tags
   — Header — Aside — footer
8. Intermediate html tags [tutorial]— Ordered list — Unordered list — Code — Pre — Forms — Html Input — Text Input — Radio input — Submit button — Blockquotes — Video — Audio — Embed — Canvas

What is HTML?

HTML is the short form for Hyper Text Markup Language. It helps us to display text, links, pictures, sounds and videos correctly on a webpage. Every time you visit a website through you should know that HTML is involved.

HTML was created by Tim Berners-Lee to share documents across the internet. It has evolved. You can now be able to share images, videos, and even play games on the internet.

How HTML Works: Introduction to HTML

HTML is used to describe the appearance of a document to be displayed by a internet browser.

HTML documents are normal text documents but with ‘.html‘ file name extension. Normal text files have a ‘.txt‘ file name extension.

When the HTML file is viewed on a browser, the browser interprets the HTML code is but does not display the html code itself.

To view the html code itself, you can right click on the webpage and click on view source.

You need to use a text editor, to edit the HTML code. There are many text editors you can use like Sublime Text or Notepad++.

Html elements

Html element includes the opening tag, the closing tag and the content between the tags.

These are tags used to tell the browser the beginning and the end of a HTML element.

Basic html elements and tags tutorial

1. Basic HTML Page

Each HTML page contains a template that is always present in any HTML page. Further more, the tags used in the template help divide your html into meaningful sections.

Each HTML page usually has the following tags:

 
 
 
 
  
This is a basic HTML page. 

 

This is a basic HTML page.

Anything that you want to be displayed on the HTML page is added between the body tags.

HTML Text Tags

Headings: Creating Headings using HTML

There are 6 type of heading with h1 being used as the title of the post or article for SEO purposes.

The rest can be used for headings and sub headings.

H1 Heading1

H2 Heading2

H3 Heading3
 
H4 Heading4

H4 Heading5

H6 Heading6

Источник