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

Mr. Camel

Содержание
  1. HTML Basic Examples
  2. HTML Documents
  3. Example
  4. My First Heading
  5. The Declaration
  6. HTML Headings
  7. Example
  8. This is heading 1
  9. This is heading 2
  10. This is heading 3
  11. HTML Paragraphs
  12. Example
  13. HTML Links
  14. Example
  15. HTML Images
  16. Example
  17. How to View HTML Source
  18. View HTML Source Code:
  19. Inspect an HTML Element:
  20. HTML Web Page Examples with Source Code
  21. HTML Web Page Example 1
  22. HTML WebPage Example 2
  23. HTML Code Example 3 (Offer Page)
  24. HTML Code Example 4
  25. Conclusion
  26. HTML Starter Template – A Basic HTML5 Boilerplate for index.html
  27. HTML Boilerplate Syntax
  28. DOCTYPE
  29. html tag
  30. head tag
  31. meta tags
  32. title tag
  33. link tag
  34. body tag
  35. main tag
  36. h1 tag
  37. Wrap up

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.

Источник

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 Starter Template – A Basic HTML5 Boilerplate for index.html

Dillion Megida

Dillion Megida

HTML Starter Template – A Basic HTML5 Boilerplate for index.html

HTML has different tags, some of which have semantic meanings. A basic boilerplate for an HTML file looks like this:

          
Welcome to My Website

In the rest of this article, I’ll explain what each part of this boilerplate means.

HTML Boilerplate Syntax

DOCTYPE

This element is the doctype declaration of the HTML file. tells the browser to render the HTML codes as HTML5 (as opposed to some other version of HTML).

This is important, because without this declaration, HTML5 elements like section , article , and so on may not be rendered correctly.

html tag

The html tag is the root of the HTML document. It houses the head tag, the body tag, and every other HTML element (except the DOCTYPE) used in your website.

It also has the lang attribute, which you can use to specify the language of the text content on a website. The default value is «unknown», so it is recommended that you always specify a language.

Defining a language helps screen readers read words correctly and helps search engines return language-specific search results.

head tag

The head tag houses the metadata of your website. These are visually invisible data to the user, but they provide information about your website’s content. Search engines especially use this data to rank your website.

Metadata in the head tag includes meta tags, title tags, link tags, scripts, stylesheets, and more.

meta tags

The meta tag is a metadata element used to add more metadata to your website than the kind that non-meta tags like title provide.

You can use these tags for various purposes:

  • adding metadata for social media platforms to create link previews
  • adding a description for your website
  • adding a character encoding for your website
  • and many more.

Search engines, social media platforms, and web services use this metadata to understand the content of your website and determine how to present them to users.

title tag

The title tag is used to specify a title for your website. Your browser uses this to display a title at the title bar:

Screenshot-2022-03-25-at-07.38.56

This tag also helps search engines show titles for your website on their search results:

Screenshot-2022-03-25-at-07.44.11

You use the link tag, as the name implies, to link to another document. Usually, this establishes different kinds of relationships between the current document and a separate document.

For example, as seen in the code block above, we’ve established a «stylesheet» document relationship with the styles.css file.

The most common use of this tag is to add stylesheets to a document and to also add favicons to a website:

A favicon is a small image close to the title of the webpage, as seen below:

Screenshot-2022-03-25-at-07.38.56-1

body tag

The body tag houses the body content of a website, which is visible to users. Although non-visible elements like style and script can also be added here, most body tags are usually visible.

From headings to paragraphs to media and lots more, those elements are added here. Any element not found here (which could be included in the head tag) will not be shown on the screen.

main tag

The main tag specifies the essential content of a website. This would be the content related to the website’s title.

For example, a blog post page. The social media sharing on the left, advertisements on the right, header, and footer are minor parts of the web page. The post itself showing the cover image, the title, and post text content is the central part, which would be in the main element.

h1 tag

HTML has different heading elements which are h1 , h2 , h3 , h4 , h5 and h6 . Heading elements are used to describe different sections of a web page. And these elements have an order, with the h1 being the highest.

You should only have one h1 element on a webpage as this starts the main section. And then, you have other sections and subsections for which you can use the other heading elements.

Also, note that you shouldn’t skip headings. For example, you shouldn’t use an h4 element after using an h2 element. A good structure could be like this:

Welcome to my website
 
What do I have to offer
 
1. Financial Benefits
 
2. Society improves
 
a. Improving the tax system
 
b. Providing more refuse dumps
 
Who am I
 
Conclusion

From this code, you can see how the heading levels specify their position in sections and subsections.

Wrap up

In this piece, we’ve seen an HTML starter boilerplate and what each tag used in this template means.

This list of elements is non-exhaustive as many more elements can be found in the head tag and the body tag, with numerous attributes, too.

Источник

Читайте также:  Threading program in python
Оцените статью