Урок №1 ( Основы HTML + CSS ) - Форум Cheat-Master.ru
  • Страница 1 из 1
  • 1
Модератор форума: Sanoxxx, Alowir  
Урок №1 ( Основы HTML + CSS )
Overlay Дата: Понедельник, 27.01.2014, 23:21 | Сообщение # 1
Любитель
Сообщений: 46
Статус: Offline


И так, здравствуйте уважаемые читеры. Сегодня мы разберем с вами легко написанный шаблон сайта на HTML + css.
Авто шаблона: я ( OVERLAY )


Собственно сам сайт



Сначала разберем HTML а именно:
• Обявление в Css
• Создание порагрофоф
• Создание отступов/кнопок
Весь код старницы
Код
<html> // Создаем HTML документ
<head> // Верхняя часть сайта
   <title>Ваш текст</title> // Название которое будет показано в ярлыке браузера
   <meta http-equiv="Content-type" content="text/html; charset=windows-1251"> // Кодировка
   <link rel="stylesheet" type="text/css" href="css/style.css"> // Откуда будут браться КСС
</head>
<body> // Средняя часть сайта

<div class="button" > // Создание подраздела и даем ему класс button (( Этот класс button мы будем указывать в css но это поже ))
     <ul> // Тег для кликабельных кнопок
     <b><li class="new_element"><p><a href="/index.html" target="_blanck"> Главная </a></p></li></b> // ссылка/кнопка
     <b><li class="new_element"></p><a href="/"target="_blanck" > Форум </a></p></li></b> // ссылка/кнопка
     <b><li class="new_element"><p><a href="http://revenge-rp.ru/monitoring" target="_blanck"> Мониторинг</a></p></li></b> // ссылка/кнопка
     <b><li class="new_element"><p><a href="http://htmk-css.bl.ee/obnovlenia"> UCP </a></p></li></b> // ссылка/кнопка
     <b><li class="new_element"><p><a href="http://htmk-css.bl.ee/obnovlenia"> Обновления </a></p></li></b> // ссылка/кнопка
       </ul> // Закрываем тег
</div> // Закрываем тег
<br><br><br><br><br><br><br><br>  // Это отступы.
<div class="pred"><center> // Опять создаем подраздел и даем ему класс и помещаем текст по центру
Неможнко предыстории
</center></div>

<div id="wrapper"> // Это блоки которые показаны на видео ( Я удалю оствшиеся два, они единтичны, что бы места меньше занимало

     <div class="news"> // Опять создаем подраздел и даем ему класс ( Поже поймете зачем, когда будет урок по CSS )  
       <div id="blockImages">  // Опять создаем подраздел и даем ему класс ( Поже поймете зачем, когда будет урок по CSS )  
         <div id="OpisanieText"> // Опять создаем подраздел и даем ему класс ( Поже поймете зачем, когда будет урок по CSS )  
           <ul class="infotext"> // Опять создаем подраздел и даем ему класс ( Поже поймете зачем, когда будет урок по CSS )  
             <li class="prosmotr">154</li> // Создаем переменную для CSS что бы редактировать текст
             <li class="komentari">213</li> // Создаем переменную для CSS что бы редактировать текст
             <li class="avtor">Jose_Menor</li> // Создаем переменную для CSS что бы редактировать текст
           </ul>
           <span id="testnews">
            <center>В 2011 году, на город San Fiero<br>
            обрушился не понятный <br>
            метиорит что привело к <br>  
            АПОКАЛИПСИСУ</center>
          </span>
         </div>
       <img src="images/news.jpg" width="400">
      </div>
     <span id="Opisanie">
       <a href="Тут ссылка на обновку"> Город после трагедии!</a> // Ссылка кликабельная, на форуме такая же юзается так: (url=ссылкa)TEST(/url) ( К примеру привел )
       <span> Дата: 30.11.2013 </span> // Обычный текст
     </span>
     </div>

</div>

</body>// Закрываем тег
</html>


Кому что не понятно вопросы в тему, будет 20 коментариев, начну курс видеоуроков, где мы подробно все сделаем!


skype: cm.overlay
WebeArt Дата: Воскресенье, 02.02.2014, 21:34 | Сообщение # 2
Новичок
Сообщений: 6
Статус: Offline
По-моему мнению данный урок не особо содержательный.
Цитата Overlay ()
<body> // Средняя часть сайта

Как <body> может быть средней частью?
Во-первых - в этой части и содержится всё то, что мы видим на сайте.
Во-вторых - Ладно, мб ты имел ввиду то, что <head> это верхняя часть, но всё равно <body> не может быть центральной частью, т.к если следовать данной логике получается, что у сайт 2 части <head> и <body>.

Цитата Overlay ()
<b><li class="new_element"><p><a href="/index.html" target="_blanck"> Главная </a></p></li></b> // ссылка/кнопка

тут на твоём месте я бы по-подробнее расписал, где именно ссылка. Не _blanCk, а _blank

Цитата Overlay ()
// Создание подраздела

Это называется блок, а не подраздел

Цитата Overlay ()
<ul> // Тег для кликабельных кнопок

шта? Наверно я зря провёл свою жизнь, думая всегда, что это тег списка

Цитата Overlay ()
<br><br><br><br><br><br><br><br> // Это отступы.

тег <br/> отвечает за переход на новую строку. И его принято писать со слешем на конце

Цитата Overlay ()
<span> Дата: 30.11.2013 </span> // Обычный текст

Почему обычный текст? Если ты блоку не присваиваешь класс, это не значит, что он перестаёт быть блоком. в ксс стили ему можно придавать в таком виде span {тут стили для тблока span}

Цитата Overlay ()
<img src="images/news.jpg" width="400">

у тега img должен присутствовать тег alt, иначе валидатор ругаться будет, так же <img> должен закрываться слешем на конце

Из всего выше сказанного думаю ясно, что перед тем, как учить кого то нужно подучиться самому.


Сообщение отредактировал WebeArt - Воскресенье, 02.02.2014, 21:35
  • Страница 1 из 1
  • 1
Поиск:
Статистика Форума
Лучшие пользователи
Admin [39113]

GеNius [7210]

[CM]Russel [5557]

kenlo763 [4952]

[CM]AGRESSOR [4639]

Snake_Firm [4452]

Сэс [4416]

Artem_Buero [4223]

[CM]Durman [3204]

[CM]Рафаэль [3080]

iMaddy [2855]

sky_Woker [2854]

getrekt [2745]

Новые пользователи
Akery [03:16]

Securityzle [00:49]

smartservicerecruit [21:41]

pashafedlyuk [21:32]

Nauk555 [21:21]

Nauk999 [21:05]

siege [17:30]

CryptoRiched [00:42]

FANNEIL123 [08:17]

fanneil100 [07:56]

wyir [23:05]

morgenshtern2195 [22:41]

gdhhdhdjdjdjdjd [19:03]