Build A Real-World HTML5 & CSS3 Responsive Website From Scratch
As the website should consists of two more pages we’re continuing the implementation with the next page: About.
HTML 5 and CSS 3: The Techniques You’ll Soon Be Using
In this tutorial, we are going to build a blog page using next-generation techniques from HTML 5 and CSS 3. The tutorial aims to demonstrate how we will be building websites when the specifications are finalized and the browser vendors have implemented them. If you already know HTML and CSS, it should be easy to follow along.
Before we get started, consider using one of our HTML5 Templates or CSS Themes for your next project—that is, if you need a quick and professional solution.
Otherwise, it’s time to dig into these techniques.
1. HTML 5
HTML 5 is the next major version of HTML. It introduces a bunch of new elements that will make our pages more semantic. This will make it a lot easier for search engines and screenreaders to navigate our pages, and improve the web experience for everyone. In addition, HTML 5 will also include fancy APIs for drawing graphics on screen, storing data offline, dragging and dropping, and a lot more. Let’s get started marking up the blog page.
2. Basic Structure
Before we begin marking up the page we should get the overall structure straight:
In HTML 5 there are specific tags meant for marking up the header, navigation, sidebar and footer. First, take a look at the markup and I’ll explain afterwards:
Page title
Page title
id="intro">
It still looks like HTML markup, but there are a few things to note:
- In HTML 5, there is only one doctype. It is declared in the beginning of the page by . It simply tells the browser that it’s dealing with an HTML-document.
- The new tag header is wrapped around introductory elements, such as the page title or a logo. It could also contain a table of contents or a search form. Every header typically contains a heading tag from to . In this case the header is used to introduce the whole page, but we’ll use it to introduce a section of the page a little later.
- The nav-tag is used to contain navigational elements, such as the main navigation on a site or more specialized navigation like next/previous-links.
- The section-tag is used to denote a section in the document. It can contain all kinds of markup and multiple sections can be nested inside each other.
- aside is used to wrap around content related to the main content of the page that could still stand on it’s own and make sense. In this case we’re using it for the sidebar.
- The footer-tag should contain additional information about the main content, such as info about who wrote it, copyright information, links to related documents and so on.
Instead of using divs to contain different sections of the page we are now using appropriate, semantic tags. They will make it a lot easier for search engines and screen readers to figure out what’s what in a page.
3. Marking Up the Navigation
The navigation is marked up exactly like we would do it in HTML 4 or XHTML, using an unordered list. The key is that this list is placed inside the nav-tags.
4. Marking Up the Introduction
We have already defined a new section in the document using the section tag. Now we just need some content.
id="intro">
Do you love flowers as much as we do?
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.
We add an id to the section tag so we can identify it later when styling. We use the header tag to wrap around the introductory h2 element. In addition to describing a whole document, the header-tag should also be used to describe individual sections.
5. Marking Up the Main Content Area
Our main content area consists of three sections: the blog post, the comments and the comment form. Using our knowledge about the new structural tags in HTML 5, it should be easy to mark it up.
Marking up the Blog Post
Go through the markup and I’ll explain the new elements afterwards.
class="blogPost">
This is the title of a blog post
Posted on datetime="2009-06-29T23:31:45+01:00">June 29th 2009 by href="#">Mads Kjaer - href="#comments">3 comments
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio.
We start a new section and wrap the whole blog post in an article-tag. The article tag is used to denote an independent entry in a blog, discussion, encyclopedia, etc. and is ideal to use here. Since we are viewing the details of a single post we only have one article, but on the front page of the blog we would wrap each post in an article-tag.
The header element is used to present the header and metadata about the blog post. We tell the user when the post was written, who wrote it and how many comments it has. Note that the timestamp is wrapped in a -tag. This tag is also new to HTML 5 and is used to mark up a specific place in time. The contents of the datetime attribute should be:
- The year followed by a figure dash (a minus sign to you non-typography nerds)
- The month followed by a figure dash
- The date
- A capital T to denote that we are going to specify the local time
- The local time in the format hh:mm:ss
- The time zone relative to GMT. I’m in Denmark which is 1 hour after GMT, so I write +01. If you were in Colorado you would be 7 hours behind GMT, and you would write -07.
Marking up the Comments
Marking up the comments is pretty straight-forward. No new tags or attributes are used.
id="comments">
Comments
href="#">George Washington on datetime="2009-06-29T23:35:20+01:00">June 29th 2009 at 23:35
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.
href="#">Benjamin Franklin on datetime="2009-06-29T23:40:09+01:00">June 29th 2009 at 23:40
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.
Marking up the Comment Form
Several enhancements to forms have been introduced in HTML 5. You longer have to do client-side validation of required fields, emails, etc. The browser takes care of this for you.
action="#" method="post">
Post a comment
for="name">Name
name="name" id="name" type="text" required />
for="email">E-mail
name="email" id="email" type="email" required />
for="website">Website
name="website" id="website" type="url" />
for="comment">Comment
name="comment" id="comment" required>
type="submit" value="Post comment" />
There are new two new types of inputs, email and url. Email specifies that the user should enter a valid E-mail, and url that the user should enter a valid website address. If you write required as an attribute, the user cannot submit an empty field. “Required” is a boolean attribute, new to HTML 5. It just means that the attribute is to be declared without a value.
Marking up the Sidebar and Footer
The markup of the sidebar and footer is extremely simple. A few sections with some content inside the appropriate aside- and footer-tags.
You can view the final, unstyled markup here. Now for the styling.
6. Styling with CSS 3
CSS 3 builds upon the principles about styles, selectors and the cascade that we know so well from earlier versions of CSS. It adds loads of new features, including new selectors, pseudo-classes and properties. Using these new features it becomes a lot easier to set up your layout. Let’s dive in.
Basic Setup
To start off with we are going to define some basic rules concerning typography, background color of the page, etc. You’ll recognize all of this from CSS 2.1
/* Makeshift CSS Reset */
margin: 0;
padding: 0;
/* Tell the browser to render HTML 5 elements as block */
header, footer, aside, nav, article
display: block;
body
margin: 0 auto;
width: 940px;
font: 13px/22px Helvetica, Arial, sans-serif;
background: #f0f0f0;
font-size: 28px;
line-height: 44px;
padding: 22px 0;
font-size: 18px;
line-height: 22px;
padding: 11px 0;
padding-bottom: 22px;
First we reset margin- and padding-styles with a simple rule. In a production environment I would use a more complete CSS Reset such as Eric Meyer’s (for CSS 2.1) but for the scope of the tutorial this will do.
We then tell the browser to render all the new HTML 5 elements as block. The browsers are fine with elements they don’t recognize (this is why HTML 5 is somewhat backwards compatible), but they don’t know how those elements should be rendered by default. We have to tell them this until the standard is implemented across the board.
Also note how I’ve chosen to size the fonts in pixels instead of ems or %. This is to maintain the progressive nature of the tutorial. When the major browsers one day are completely finished implementing HTML 5 and CSS 3 we will all have access to page zooming instead of just text resizing. This eliminates the need to define sizes in relative units, as the browser will scale the page anyway.
See what the page looks like with the basic styling applied. Now we can move on to styling the rest of the page. No additional styles are required for the header, so we’ll go straight to the navigation.
7. Styling the Navigation
It is important to note that the width of the body has been defined as 940px and that it has been centered. Our navigation bar needs to span the whole width of the window, so we’ll have to apply some additional styles:
position: absolute;
Build A Real-World HTML5 & CSS3 Responsive Website From Scratch
In this tutorial we’ll be building a real-world website with pure HTML 5 and CSS 3 which can be used as a template for a web design agency or any other business website. Let’s take a look at the final result first:
The website template is fully responsible and consists of three pages. The start page looks like the following:
If you’re accessing the web site on a smaller screen size the layout will adapt accordingly as you can see in the following screenshot:
Furthermore the website template consist of an About and a Services page:
Let’s explore the steps needed to implement this website from scratch.
Implementing The Start Page
In the following steps we’ll be using plain HTML 5 and CSS 3 code for implementation. No additional framework is needed. Let’s start by creating a new and empty project folder:
Change into that newly created project folder
and create subfolders with the following commands:
$ mkdir css
$ mkdir img
$ mkdir fonts
Because we want to make use of Font Awesome icons, we need to make sure that the icon library is added to our project. Go to http://fontawesome.io, download the free package, unpack the archive and copy the files from the css and fonts folder to the corresponding subfolders in the project.
Implement Index.html
Let’s start coding by adding a new file index.html to our root project folder and add the following HTML code:
1-2-3 Web Design | Welcome
As you can see we’re defining five sections within the body element:
- header: Contains the top level bar of the site with branding and navigation menu.
- showcase section: Contains the main image and the main side headline.
- newsletter section: Contains an email input field and and a submit button, so that the user can subscribe to the newsletter.
- boxes section: Contains three boxes to highlight services.
- footer: Contains the code which is needed to display the footer.
Let’s add the needed HTML code for each section step by step …
Add HTML Code For Header
Within the header section add the following code to display branding and the navigation menu on top:
Add HTML Code For Section Showcase
Next, insert the following code within the showcase section:
Affordable Web Design For Small And Medium-sized Companies
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo repellat incidunt quasi quibusdam non nostrum, dolorem molestiae enim, excepturi soluta libero voluptatem provident consectetur accusamus nulla repudiandae nobis. Excepturi, assumenda.
Add HTML Code For Section Newsletter
The newsletter subscription form is made up of the following HTML code:
Get Our Newsletter
Add HTML Code For Section Boxes
Finally add the following HTML code in boxes section:
Grow Your Audience
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi nulla id quisquam veritatis eius perspiciatis velit eum unde soluta, veniam aliquid deleniti ex similique. Aperiam molestiae natus nulla sit, quis.
Modern Web Design
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam quia magnam, voluptates, impedit eum laboriosam assumenda eos sit at nihil, dolore! Aliquam, laborum neque corporis molestiae eius ea laudantium porro.
Ultra-Fast Hosting
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam quia magnam, voluptates, impedit eum laboriosam assumenda eos sit at nihil, dolore! Aliquam, laborum neque corporis molestiae eius ea laudantium porro.
Now you should be able to see the following result in the browser if you open index.html directly:
Styling Index.html
In the next step we need to style the content of the website. The file css/style.css has already been included in index.html:
Let’s use that file to include the CSS code which is needed to style our web application:
General CSS Code
First insert some general CSS code:
body font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin:0;
background-color: #f4f4f4;
>.container width: 80%;
margin: auto;
overflow: hidden;
>ul margin: 0;
padding: 0;
>
Header CSS Code
The header section is containing the branding of the site and the navigation menu. For styling the following CSS code is needed and also added to file style.css:
/* Header */
header background: #353637;
color: #ffffff;
padding-top: 30px;
min-height: 70px;
border-bottom: #32a0c2 3px solid;
>header a color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
>header li float: left;
display: inline;
padding: 0 20px 0 20px;
>header #branding float: left;
>header #branding h1 margin: 0;
>header nav float: right;
margin-top: 10px;
>header .highlight, header .current a color: #32a0c2;
font-weight: bold;
>header a:hover color: #cccccc;
font-weight: bold;
>
Please note, that the menu links should change the appearance when the mouse is moved over the element. Therefore the the selector header a:hover is used and the color and font-weight property values are set.
CSS Code For Section Showcase
For the showcase section the following CSS code is needed:
/* Showcase */#showcase min-height: 400px;
background:url('../img/headerbg.jpg') no-repeat center;
background-size: cover;
text-align: center;
color: #ffffff;
>#showcase h1 margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
>#showcase p font-size: 20px;
>
The background image is set by using the background property of the section element with ID showcase. The image file is stored inside the img folder and the filename is headerbg.jpg. This file is selected by using the CSS function url. This function expects the relative path as the first and only parameter.
To make sure that the image is adapting to various screen sizes correctly it is important to furthermore use the options no-repeat and center. Furthermore you should make sure to set CSS property background-size to value cover.
CSS Code For Section Newsletter
The CSS code for section newsletter is available in the following listing and needs to be inserted into style.css as well:
/* Newsletter */
#newsletter padding: 15px;
color: #ffffff;
background: #353637;
>#newsletter h1 float: left;
>#newsletter form float: right;
margin-top: 15px;
>#newsletter input[type="email"] padding: 4px;
height: 25px;
width: 250px;
>.button_1 height: 38px;
background: #cccccc;
border: 0;
padding-left: 20px;
padding-right: 20px;
color: #353637;
>
Footer CSS Code
Next, add the CSS code for the footer area:
footer padding: 20px;
margin-top: 20px;
color: #ffffff;
background-color: #32a0c2;
text-align: center;
>
Making The Website Responsive By Using Media Queries
Finally, we want to make sure that the web site is responsive and is adapting to changing screen sizes. The way this is achieved is by adding media queries to the CSS code:
@media(max-width: 768px) header #branding,
header nav,
header nav li,
#newsletter h1,
#newsletter form,
#boxes .box float: none;
text-align: center;
width: 100%;
> header padding-bottom: 20px;
> #showcase h1 margin-top: 40px;
> #newsletter button display: block;
width: 100%;
> #newsletter form input[type="email"] width: 100%;
margin-bottom: 5px;
>
>
By using the @media keyword we’re able to define CSS code which is only activated at a specific screen size. In our example we want to define CSS code which is valid for screen sizes with a maximum width of 768 pixel. There we need to set the max-width attribute to the value 768px:
@media(max-width: 768px)< /* insert CSS code for small screen sizes here */ >
Implementing The About Page
As the website should consists of two more pages we’re continuing the implementation with the next page: About.
Adding HTML Code in File About.html
Create a new file about.html in the project folder and insert the following HTML code:
The page consists of two columns: a main column containing a title and text and a sidebar with additional text.
Adding CSS Code for About Page
The following CSS code needs to be added to css/style.css:
/* Sidebar */aside#sidebar float: right;
width: 30%;
padding: 5px;
>aside#sidebar .contact input, aside#sidebar .contact textarea width: 90%;
padding: 5px;
>article#main-col float: left;
width: 65%;
>
Furthermore the CSS media query needs to be extended to apply a different styling to article#main-col and aside#sidebar as well:
@media(max-width: 768px) header #branding,
header nav,
header nav li,
#newsletter h1,
#newsletter form,
#boxes .box,
article#main-col,
aside#sidebar float: none;
text-align: center;
width: 100%;
>
[. ]
>
Implementing The Services Page
Finally, we’re going to implement services.html.
Adding HTML Code In File Services.html
Create a new file services.html and insert the following HTML code:
The services page is made up of two columns. In the main column three offerings are presented. In the sidebar a contact form is embedded with three input elements. In addition a submit button is included.
Adding CSS Code For Services Page
The corresponding CSS code is inserted into file css/style.css once again:
/* Services */
ul#services li list-style: none;
padding: 20px;
border: #cccccc solid 1px;
margin-bottom: 5px;
background: #32a0c2;
>ul#services h3 border-bottom: #353637 solid 1px;
>
Furthermore the CSS code which is embedded in the media query is extended:
#newsletter form input[type="email"],
.contact input,
.contact textarea,
.contact label width: 100%;
margin-bottom: 5px;
>
Having added this last piece of code the result in the browser should now correspond to the website template which has been presented at the beginning.
The Web Developer Bootcamp
The only course you need to learn web development — HTML, CSS, JS, Node, and More!
HTML5 и CSS3 верстка с нуля
Здравствуйте уважаемый читатель моего блога создай сам. Сегодня мы начинаем с вами изучение интересной темы под названием «Верстка сайта с нуля«. Ну не станем затягивать, а сразу приступим к знакомству с гипертекстовым языком разметки HTML5.
План занятия:
- Знакомство с html, понятие верстки
- Программы для верстки
- Шаблон страницы html4 и html5
- Разбор тегов шаблона html
- Сохранение документа, смена кодировки, просмотр в браузере
- Теги: абзаца, жирного выделения, курсива и тега br
- Теги заголовков: h1-h6
- Понятие парного тега и одиночного
- Строчные и блочные элементы
- Атрибуты, пример с align
- Работа с изображениями
- Относительный путь
- Абсолютный путь
- Гипер ссылки
- Ссылка на вторую страницу
- Ссылка на файл
- Ссылка графическая
- Якорная ссылка
Что такое верстка сайта или страницы для интернета
Верстка — это создание страницы по готовому макету psd (Photoshop) для интернета или для web. Это подразумевает в себе создание некой логической разбивки страницы кодом html и его визуальным оформлением с помощью css (Cascading Style Sheets — каскадные таблицы стилей). Для верстки необходим готовый шаблон прорисован в фотошоп с которого и будет происходить верстка. В ходе верстки у вас получится несколько типов файлов, которые должны находиться в одном месте, то есть в папке, это будет ваша web страница в формате index.html, ваш файл с расширением css в котором будут все стили предназначенные для вашей страницы и папка с картинками, которые используются при оформлении страницы стилями.
Как и в разных прочих работах касающихся как сферы IT, так и других сфер в жизни людей, верстка имеет некие негласные правила, придерживаясь которых вы получите к себе уважение со стороны заказчика и хорошую верстку, которой можно будет гордиться, вот несколько правил на которые я хочу обратить ваше внимание:
- Совпадение с дизайном макета
- Кроссбраузерность
- Поддержка популярных разрешений
- Валидный и аккуратный код
Совпадение с дизайном макета — старайтесь максимально перенести макет с psd формата в сверстанную страницу. Понятное дело бывают исключения, но любая готовая страница должна с первого взгляда быть максимально схожей с макетом, это и будет хорошей версткой.
Кроссбраузерность — существует много различных браузеров, от известных нам Opera, Mozilla, Chrome и Internet Explorer и до менее известных их аналогов, вот кроссбраузерность и отвечает за одинаковое отображение верстки во всех этих браузерах. По сути сейчас все современнные браузеры отлично отображают верстку, но этого нельзя сказать о старых версиях IE.
Поддержка популярных разрешений — пользователи используют различные разрешения и аксессуары для серфинга в сети интернет, наша задача сделать верстку таковой, чтобы наша верстка отображалась максимально удобно и качественно на страницах с разных устройств просмотра страниц в сети. Главное ограничение для нас, это ширина монитора, которая минимальная на данный момент 1024px. Если наша страница помещается в этой ширине, это хорошо, а вот при обратном процессе у вас появится горизонтальная страница прокрутки, что для нас есть не совсем хорошо и тем более для будущих пользователей нашей страницы.
Валидный код — под этим подразумевается аккуратность верстки ее структурирование и понимание другим человеком. Валидность заключается в отсутствие ошибок верстки, которые можно проверить специальным сервисом валидности кода вот по этой ссылке.
Знакомство с HTML5
HTML5 — это не новый какой-то язык разметки, а всего лишь обновленный html4 в который были добавлены новые теги в основном предназначенные под оптимизацию и продвижение вашего будущего сайта. Все основные изменения с 4 на 5 версию можно выделить списком:
- Доступны новые теги и атрибуты.
- Возможность рисовать на странице.
- Поддержка элементов ранее доступных только посредством использования Flash (вставка видео или аудио).
Все эти нововведения мы просмотрим с вами на практике и вы убедитесь в простоте их использования и применения на практике.
Программное обеспечение для верстальщика
Для верстальщика нужны определенные программы, которые помогут в работе и станут незаменимыми помощниками при вашей дальнейшей работе. Первое, что мы должны установить себе на компьютер это программу Notepad++. Это такой текстовый редактор, который умеет подсвечивать синтаксис языка программирования и может кодировать документ в различные кодировки. Скачать этот редактор можно скачать абсолютно бесплатно по адресу http://notepad-plus-plus.org/download/v6.7.4.html , по ссылке всегда актуальная версия.
Второй необходимой программой является Adobe Photoshop, думаю рассказывать о ее способностям нет смысла, все так или иначе знают о ее возможностях и применении. Фотошоп нужен, чтобы открывать макет и брать изображения для верстки, а также сравнивать нашу верстку с макетом в фотошоп.
Как же обойтись без браузеров, мы уже поняли, что для проверки кроссбраузерности нужно несколько браузеров, поэтому установим себе на компьютер их, рекомендую поставить для начала самые популярные и использовать периодически для просмотра результатов нашей верстки. Установите себе: Opera, Mozilla, Chrome, Internet Explorer и Yandex браузеры.
Основным браузером для верстки я беру Mozilla Firefox, если вам интересно почему, отвечу так — для этого браузера написано наибольшее количество расширений во всевозможных применениях, включая и верстку. Мы будем использовать этот браузер, как основной, а во всех остальных проверять уже нашу кроссбраузерность.
Дополнения для верстальщика на Mozilla
Для нашего основного браузера есть замечательное дополнение под названием Firebug, чтобы установить его, открываем нашу Мозиллу и через меню в правом верхнем углу переходим во вкладку дополнения. Там в поле поиска вводим Firebug и устанавливаем его себе в браузер. Сегодня использовать мы его не будем, но в будущем это станет незаменимый помощник для нашей работы.
Вторым не менее важным дополнением является Web Developer, плагин, дает дополнительный ряд инструментов в верхней панели нашего веб браузера. Как и писал выше, с работой этих плагинов мы ознакомимся уже на практических занятиях.
Сайт с css и без css
Основное отличие сайта с работающими стилями css и без них заключается в его визуальном оформлении. Давайте откроем любую страницу в браузере Mozilla и используя наш плагин Web Developer отключим стили оформления для данной страницы, делается это следующим образом:
На вкладке css отмеченной скриншотом 1 выбираем Disable Styles и Disable All Styles, этим действием мы полностью отключаем стили к данной странице сайта. Вы можете видеть, как работает гипертекстовая разметка html без стилей. По сути страница остается не тронутой, вся информация как была, так и есть, вот только вид у нее не совсем презентабельный ))).
Практическое начало в HTML
Прежде чем мы с вами начнем создавать свою первую страницу на html, я хочу показать и рассказать как это делалось и сейчас многие делают при HTML4
Каркас шаблона страницы на html4
Название страницы
Итак первая строка называемая DOCTYPE отвечает за указание или присвоение типа текущему документу, делается это для того, чтобы браузер понимал в каком стандарте отображать данную страницу, а этих стандартов есть несколько (HTML4, HTML5, XHTML и т.д.).
Далее идет тег html, но для начала пару слов о том, что такое теги. Тег это своего рода некий контейнер, который в себе содержит определенное содержание и информацию. Тег это элемент языка разметки html и находится в треугольных скобках, что дает браузеру понять — здесь идет тег.
Теги есть двух видов: парные и одиночные. В данном случае тег html есть парным, в начале страницы он открывается, а в низу страницы закрывается. это мы можем видеть благодаря косой черточки / (слэш), вот так выглядит закрывающий тег html . Не парный тег, то есть одиночный, это тег который не требует себе закрывающего тега, по ходу верстки я буду обращать ваше внимание на такие теги и со временем вы запомните все их.
Внутри парного тега html содержатся еще два таких же парных тега, это тег … и тег … . Первый тег head содержит в себе невидимую для пользователя информацию, которая предназначена для браузера и поисковых систем. Все внутренние теги заключенные в head называются служебные и первым служебным тегом сейчас мы рассмотрим тег meta — это есть одиночный тег и указывает он браузеру на какой кодировке будет сверстана наша страница.
Основной и универсальной кодировкой для использования русскоязычных символов является utf-8, в дальнейшем следует создавать именно в ней свои страницы. Чтобы сменить кодировку в Notepad++ нужно в верхнем меню нажать слово кодировка и выбрать преобразовать в UTF-8 без BOM.
Чтобы не устанавливать кодировку в ручную каждый раз я вам советую настроить ее по умолчанию для каждого нового документа в Notepad++, делается это следующим образом. Заходим в раздел меню Опции —> настройки и переходим во вкладку Новый Документ с правой стороны указываем UTF-8 без BOM и закрываем настройки. В дальнейшем все ваши документы будут создаваться в этой кодировке по умолчанию.
Следующим тегом находящимся в теге head есть парный тег
… — тег, который дает название нашей странице, это название выводится в верху нашей вкладки в браузере. Название имеет очень большое значение для поисковых систем, поэтому в будущем нужно быть внимательным при создании названий вашим документам. Сейчас же можно просто внутри парного тега title написать Мой первый html документ, сохранить и открыть в браузере, в верху вкладки вы найдете это название.
Следующим шагом мы рассмотрим парный тег
…. Это тег, который содержит в себе всю видимую страницу браузера. В нем уже и будет содержаться весь макет, который мы будем верстать с макета psd.
Еще скажу пару слов о правильной компоновке кода в редакторе Notepad++, используйте табуляцию, то есть все теги, которые вложены внутри других парных тегов можно сдвигать в право на один TAB. Тогда ваш код будет чистым, понятным и удобочитаемым.
Основные отличия HTML5 от HTML4
Мы с вами уже рассмотрели выше, как оформляется основной каркас страницы по старому принципу, сейчас же сделаем это с помощью технологии HTML5 и затронем несколько основных тегов введенных в 5 версии.
Comments are closed, but trackbacks and pingbacks are open.