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.

Источник

Глава 2. Наш первый HTML-документ

HTML-документ — это просто текстовый файл с расширением *.html (Unix-системы могут содержать файлы с расширением *.htmll). Вот самый простой HTML-документ:

Привет!

Это простейший пример HTML-документа.

Этот *.html-файл может быть одновременно открыт и в Notepad, и в Netscape. Сохранив изменения в Notepad, просто нажмите кнопку Reload (‘перезагрузить’) в Netscape, чтобы увидеть эти изменения реализованными в HTML-документе.

Для удобства чтения я ввел дополнительные отступы, однако в HTML это совсем не обязательно. Более того, браузеры просто игнорируют символы конца строки и множественные пробелы в HTML-файлах. Поэтому наш пример вполне мог бы выглядеть и вот так:

Привет!

Это простейший пример HTML-документа.

Этот *.html-файл может быть одновременно открыт и в Notepad, и в Netscape. Сохранив изменения в Notepad, просто нажмите кнопку Reload (‘перезагрузить’) в Netscape, чтобы увидеть эти изменения реализованными в HTML-документе.

Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками «». Такой фрагмент (например, ) называется меткой (по-английски — tag, читается «тэг»).

Большинство HTML-меток — парные, то есть на каждую открывающую метку вида есть закрывающая метка вида с тем же именем, но с добавлением «/».

Метки можно вводить как большими, так и маленькими буквами. Например, метки , и будут восприняты браузером одинаково.

Многие метки, помимо имени, могут содержать атрибуты — элементы, дающие дополнительную информацию о том, как браузер должен обработать текущую метку. В нашем простейшем документе, однако, нет ни одного атрибута. Но мы обязательно встретимся с атрибутами уже в следующем разделе.

Обязательные метки

Метка должна открывать HTML-документ. Аналогично, метка должна завершать HTML-документ.

Эта пара меток указывает на начало и конец заголовка документа. Помимо наименования документа (см. описание метки ниже), в этот раздел может включаться множество служебной информации, о которой мы обязательно поговорим чуть позже.

Все, что находится между метками и , толкуется браузером как название документа. Netscape Navigator, например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов.

Эта пара меток указывает на начало и конец тела HTML-документа, каковое тело, собственно, и определяет содержание документа.

Метки вида (где i — цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня — самый крупный, шестого уровня, естественно — самый мелкий.