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

Mr. Camel

Содержание
  1. HTML Web Page Examples with Source Code
  2. HTML Web Page Example 1
  3. HTML WebPage Example 2
  4. HTML Code Example 3 (Offer Page)
  5. HTML Code Example 4
  6. Conclusion
  7. Простые правила разметки
  8. Простой список #
  9. Картинка пользователя (юзерпик) #
  10. Галерея #
  11. Навигация (простой вариант) #
  12. Навигация (сложный вариант) #
  13. Виджет в боковой колонке #
  14. Блок новостей #
  15. Статья или пост в блоге (простой вариант) #
  16. Статья или пост в блоге (сложный вариант) #
  17. Разметка страницы #

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:

Читайте также:  Java util treemap values

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.

Источник

Простые правила разметки

Простой список #

 class="list">  class="item">Первое  class="item">Второе  class="item">Третье

Картинка пользователя (юзерпик) #

 class="user">  class="user__img" src="userpic.png" alt="Дормидонт Петрович">  class="user__link" href="#">Дормидонт Петрович

Галерея #

 class="gallery gallery--slider">  class="gallery__list">  class="gallery__item">  class="gallery__img" src="flowers.jpg" alt="Цветём как в последний раз">   class="gallery__item">  class="gallery__img" src="trees.jpg" alt="Парк «Три сосны»">   
 class="nav">  class="nav__link nav__link--active">Главная  class="nav__link" href="#">Второстепенная  class="nav__link" href="#">Третья с конца  class="nav__link" href="#">Предпоследняя  class="nav__link" href="#">Совсем конец 
 class="nav">  class="nav__list">  class="nav__item nav__item--current">  class="nav__link">Главная   class="nav__item">  class="nav__link" href="#">Статьи   class="nav__item">  class="nav__link" href="#">Фотогалерея   class="nav__item">  class="nav__link" href="#">Контакты

Виджет в боковой колонке #

 class="widget">  class="widget__tilte">Выращиваем желе  class="widget__content"> Чтобы вырастить общительное дружелюбное желе, нам потребуется рулон поролона, два килограмма сахара, три яйца и пол чайной чашки ацетона.  class="widget__link" href="#">Не читать дальше.

Блок новостей #

 class="news">  class="news__title">Вчерашние новости  class="news__list">  class="news__item item-news">  class="item-news__title"> Соревнования среди воблы по конькобежному спорту  class="item-news__text"> Победила команда килек из Петрозаводска  href="#" class="item-news__link">Читать дальше    class="news__item item-news">  class="item-news__title"> Учёные уточнили роль напильника в уходе за ногтями  class="item-news__text"> Британские учёные высоко оценили вклад напильника в отращивание полутораметровых ногтей.  href="#" class="item-news__link">Не читать дальше

Статья или пост в блоге (простой вариант) #

 class="article">  class="article__title"> Нащупываем чакры у пучка петрушки  class="article__datetime">32 мая, 10:87  class="article__author author-article">  class="author-article__img" src="userpic.png" alt="Клешня Андреевна">  class="author-article__link" href="#">Клешня Андреевна Долгорукая  class="author-article__desc">Наш эксперт по чакрам   class="article__content"> Сходите на рынок и купите у старушек пучок петрушки грамм на 100. Как следует переберите, очистите от жуков и гусениц. Жуков отдайте поиграться коту, гусениц поселите в горшок с кактусами, пусть одна будет Джоном, вторая Билли, а у вас в горшке теперь будет Дикий Запад. Вернитесь к пучку петрушки. Ласково взгляните на него и как следует почешите за ухом, можно себе или коту. Перевяжите атласной ленточкой, непременно завяжите бант. Поздравляем! Теперь у вас есть полностью одомашненный пучок петрушки, который будет весело бегать за вами по пятам и проращивать свои семена в ваших тапках.

Статья или пост в блоге (сложный вариант) #

 class="entry">  class="entry__header">  class="entry__title title-entry">  class="title-entry__link" href="#"> Резиновые уточки как способ самопознания   class="entry__datetime">32 мая, 10:87   class="entry__author author-entry">  class="author-entry__img" src="userpic.png" alt="Василиса Сергеевич">  class="author-entry__link" href="#">Василиса Сергеевич   class="entry__content"> Достаньте с чердака коробку с полусотней резиновых уточек, оставшихся после празднования нового года. Из уточек и горящих свечей выложите пентаграмму на полу комнаты. Сядьте посередине в позу лотоса, в каждую руку возьмите по немецко-бразильскому словарю, прокашляйтесь, наберите полную грудь воздуха и громко и уверенно, с полной самоотдачей скажите "Кря!"  class="entry__tags tags-entry">  class="tags-entry__tilte">Метки  class="tags-entry__list">  class="tags-entry__item">  class="tags-entry__link" href="#">хоровод своими руками   class="tags-entry__item">  class="tags-entry__link" href="#">фарфоровые тапки   class="tags-entry__item">  class="tags-entry__link" href="#">гуталин в кулинарии     class="entry__menu menu-entry">  class="menu-entry__item menu-entry__item--read">  class="menu-entry__link" href="#">238 ответов   class="menu-entry__item menu-entry__item--write">  class="menu-entry__link" href="#">Написать в спортлото   class="menu-entry__item menu-entry__item--share">  class="menu-entry__link" href="#">Поделиться

Разметка страницы #

  class="site-header">  class="site-header__title">Название сайта  class="site-header__nav site-nav">  href="#" class="site-nav__link">О продукте  href="#" class="site-nav__link">О погоде  href="#" class="site-nav__link">О чём шумит камыш    class="site-main">  class="features">  class="features__title">Преимущества  class="features__list">  class="features__item">Высокие потолки [. ]   class="prices">  class="prices__title">Тарифы  class="prices__list">  class="prices__item">30 зонтиков в минуту [. ]    class="site-aside">  class="widget">  class="widget__title">Как мы отдыхаем?  class="widget__text">Читайте в нашей новой книге «Никак»    class="site-footer">  class="site-footer__socials socials">  href="#" class="socials__link socials__link--tw">Twitter  href="#" class="socials__link socials__link--fb">Facebook  href="#" class="socials__link socials__link--ok">Одноклассники   class="site-footer__copyright copyright "> Сделано  href="#" class="copyright__link">левой пяткой

Источник

Оцените статью