Твитнуть об этом видео
Поделиться на Facebook
Поделиться по E-mail
Скачать исходники к 7 видеоуроку по HTML Размер: 2.61 kB, скачали: 528 раз.
- Разархивировать скачанный файл.
- Открыть папку index.
- Запустить файл index.html в браузере.
Добро пожаловать в еще один видеоурок по курсу HTML. В нем мы разберем домашнее задание. Я надеюсь, вы его выполнили. Если у вас что-то не получилось, то обратите внимание на повторное изучение уроков, которые мы прошли:
- Что такое HTML и где писать HTML код?
- Что такое теги и атрибуты? Как создать HTML документ? Структура HTML.
- Элемент Doctype и раздел HEAD. Метаданные в HTML.
- Параграфы и заголовки в HTML.
- Учимся изменять цвет текста и цвет фона используя HTML.
- Изучаем параметры текста: шрифты, курсив, жирный, подчеркнутый, перечеркнутый и другие.
Я делал домашнее задание вместе с вами, и поэтому вы можете его сейчас видеть на экранах. Вы можете найти все свои ошибки либо убедиться в правильности выполнения домашнего задания.
Давайте откроем мою страничку в браузере. Текст «Добро пожаловать на мою страничку мыслей» изображен в теге <h1> и отцентрирован. Далее идет текст курсивом. Название сайта «info-line.net» выделено жирным. Весь этот текст выровнен по левому краю и находится в теге <p>, что означает «абзац».
Далее идет тег <div>. Текст «PHP» и «HTML» выделены жирным, «Оставалось придумать, про что будет сайт:)» изображен синим цветом с помощью тега <font>, и «Дааааа… Шли недели…» находится в теге <small>, что означает «маленький».
После мы видим тег <h3> — заголовок третьего уровня и текст синего цвета. Потом идет опять обычный текст в параграфах <p> с выделенным жирным словом «удобном». Затем идет черный подчеркнутый текст, написанный шрифтом Monotype Corsiva.
Вот и все, что я хотел разобрать в данном видеоуроке. Сейчас вы можете посмотреть на код. Я его также приложу к текстовой части данного видеоурока, и вы сможете сверить все свои ошибки.
<!DOCTYPE HTML Public "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Главная страница</title> <meta http-equiv="Content-Language" content="ru"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <meta name="keywords" content="Мой, личная, страница, info, line, net, рассказ, сайт"> <meta name="description" content="Моя личная страница! Сказ о том, зачем я создал сайт info-line.net"> </head> <body text="#660000" bgcolor="#FFFCC"> <h1 align="center">Добро пожаловать на мою страничку мыслей.</h1> <p align="left"><i>Данная страничка посвящена одной истории. Истории о том, зачем я создал сайт <b>info-line.net</b></i></p> <div title="Как-то раз..."> Как-то раз я блуждал во всемирной паутине под именем Интернет, впрочем это было обычным повседневным занятием для меня. Ничто не предвещало беды, однако я случайно попал на сайт по изучению языка php. <b>HTML</b> я уже знал к этому времени, не буду рассказывать подробнее, так как это совсем другая история... <br>Ближе к <b>PHP</b>... И изучать эти многостраничные книги мне было так лениво, что каждый раз, когда я их снова видел, я сохранял адрес страницы и переключался на что-нибудь другое. <br>Спустя год, таких адресов накопилось достаточно много, но изучать я так и не хотел. Благодаря одному человеку, а точнее лишь одной его фразе, которую я запомню скорее всего на всю жизнь, я поборол лень и выполнил все то, что мне было нужно. <br>Это был именно тот момент в жизни, когда что-то внутри перещелкнуло и я стал идти по собственному пути успеха. <br>Я работал на фрилансе(кто не знает, это - удаленная работа, то есть люди дают задание, за выполнение которого, получаешь деньги). <br>И тут возникла идея создать уже свой собственный сайт. <font color="#000099">Оставалось придумать, про что будет сайт :)</font> <br><small>Дааааа... Шли недели...</small></div> <h3><font color="#0000CC">И вдруг, осенило!</font></h3> <p>Я решил создать сайт про то, чему сам долго и упорно трудился, тому, как создать свой сайт в этом большом и наверняка всем известном пространстве. <br>Я бы мог написать книгу, которая бы лежала на n-ой полке какого-нибудь магазина, а то и вовсе у читателей, которым было бы также лениво приступать к ее изучению. <br>Но я предпочел потратить больше времени и подать информацию в более <b>удобном</b> варианте ее восприятия для пользователей. <br>Сейчас Вы смотрите данный видеоурок и скорее всего, Вы со мной согласны. </p> <br> <p align="right"><font face="Monotype Corsiva" color="#000000"><u>Спасибо за внимание! C Уважением, Олег Зубцов.</u></font></p> </body> </html>
Спасибо за внимание. До встречи в следующем видеоуроке, в котором вы узнаете, что такое списки и линии в HTML.
Info-line.net
Олег! Благодарю сердечно за уроки по html...Кое-что мы уже знаем)) PHP в студию!!! Даёшь PHP!!! =) =) =) =) =) =) =)
ждём...
Спасибо за благодарность 🙂
Еще интересует как создать миничат в html? Есть у Вас инфо по этому поводу? =-O %) =-O
Мини-чат на HTML не написать. Нужны знания более серьезного языка, например PHP.
Олег. Идите работать репетитором)) Уроки не громоздкие, но емкие и краткие, а потому и легкие к восприятию. О, мне понравился фокус с ...мелочь, а приятно))... я то, всё больше на время терял, и шрифт действительно — красивенький...уже взят на вооружение и применен...а как насчет готики в кириллице? Насчет мини-чата, я в принципе так и думал, ну авось, мало-ли, может чего-то не знал... =-O =-O =-O =-O =-O вот потому-то PHP- меня интересует особенно, в сравнении с html, он имеет ряд существенных преимуществ...Олег, имеется-ли у Вас урок по чату, как его сделать на сайте, а сайт прежде перевести из html в PHP? Благодарю. Михаил.
HTML — язык разметки.
CSS — каскадные таблицы стилей.
PHP — язык программирования.
Прежде чем изучать PHP, нужно знать HTML и CSS.
Нет, такого урока на сайте пока нету.
А в виде форм, через вивер можно сообразить какой-нибудь простенький чат?
С помощью одних форм вы его не сделаете. Чтобы написать хороший чат — желательно знать PHP и MySQL.
Даёшь PHP!!!Даёшь PHP!!!Даёшь PHP!!! *BRAVO* *HELP* =)
ну а хиленький чатик, значит таки можна?
На одном HTML — нет. Возможно получится с помощью JavaScript, но я не видел таких чатов. *UNKNOWN*
Thank you for the answer and...Forgive me, for the causal inconvenience, please. But... Олег, а по какому принципу сделан чат на UCOZ? К примеру, как на этом сайте справа
К сожалению, PHP — язык серверный, а потому скрыт от глаз посетителей.
В чате используется JQuery библиотека. Скорее всего PHP тоже там есть.
Если вас интересует чат, то лучшый выход в этой ситуации — просто поискать готовый скрипт чата.
можно-ли на свой сайт в html вставить блок с подобным (кодом) чата?
Можно, только вам нужно знать этот код, который вы не видите 🙂 Поэтому лучший вариант — установка готового скрипта чата. Но для его установки вам нужно будет узнать, как установить локальный хостинг (Denwer) на свой компьютер.
По установке локального хостинга Denwer будут записаны видеоуроки, но немного позже, в порядке логической очереди.
Олег, сердечно благодарю за ответы...у меня уже установлен PHPmyadmin, этот подойдет?..и могли бы Вы помочь, — дать уже готовый код чата? Может где-то есть в закромах? =) =) =)
PhpMyAdmin — это веб-интерфейс для администрирования MySQL (база данных). Он включен в Denwer.
Нет, никогда не интересовался чатами 🙂
а об этом чате слышали что- нибудь?
Нет, но судя по описанию чат неплохой. Попробуйте установить. Буду благодарен, если сообщите о результатах и впечатлениях от чата.
Если понадобится помощь — спрашивайте! 🙂
Олег, в настоящий момент я ищу его (Сbox) с русским интерфейсом, в этом можете помочь? Да и смайлики предлагаемые у них (синюшные цветом), а потому особого восторга не вызывают, хотелось бы иметь общепринятые (желтые)...
Олег, уже установил с русским интерфейсом, сейчас обкатываю, разбираюсь с его администрированием
Это хорошо =)
Слава Богу, чат установил и уже используется.)) =) =) =) Тем не менее, Олег, Ваши уроки по любым темам (и в особенности по PHP)) ожидаю с особым вниманием и живейшим интересом...Будьте здоровы...и сообщайте, please если будет появляться что-то новенькое. Благодарю, Михаил.
Спасибо 🙂 Чтобы не пропустить новые видеоуроки, подпишитесь на RSS-ленту сайта 😉
Хорошо, я подписался на эл. почту...Олежек, ты можешь посмотреть исходник кода страницы главной (index)? что-то там я напутал с цветами ссылок, кстати там и стили...вышло всё наоборот, хотя конечно же хотелось как лучше 🙁 🙁 🙁 ...Уж так навертел, накрутил, что нужен свежий взгляд...Если можешь глянь, вот сайт, его главная страница. Подскажи, please ... =) =) =)
А что именно напутали? Все отображается нормально. Или вы уже исправили проблему? Если же проблема еще существует, то прошу объяснить более подробно: что было до этого, что хотели получить, что изменяли в коде.
Посмотрев ваш исходный код, решил дать пару советов:
1. Чтобы не запутаться, давайте человекопонятные имена классам. Пример названия класса для меню: — .menu {}
2. Сократите кол-во написаний классов в HTML.
Вместо этого:
Можно добавить все абзацы в тег div с id=content и прописать стили для всех абзацев, которые в нем находятся.
Как это будет выглядеть:
CSS код:
div#content p { color: #5D8311; font-size: 10pt; font-weight: bold; }HTML код:
Это позволит создать понятную структуру, увеличить читабельность кода и уменьшить вес страницы. 8)
Олежек, я есть на агенте под кодовым именем smm70@mail.ru если ты не против укажи куда...я вышлю исходник CSS ...проблема осталась...это я уже в начале хотел через font цвета поменять)) а если опуститься ниже, то заметно, что ссылки серого цвета #аааааа, а когда наводишь курсор, становятся синими...короче, накуролесил...а хотел, чтобы на footer ссылки были светлыми а в тексте синими...вот присмотрись внимательнее к ссылкам ниже...и всё увидишь...http://otwet.zp.ua/
Это layout CSS попробую выслать
#site_center {text-align:center} #main { width:1000px; text-align:left; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; } .col_1, .col_2, .col_3, .col_box_1, .col_box_2{ float:left;} /*======= index.html =======*/ #page1 #content .col_1{ width:210px; } #page1 #content .col_2{ width:600px; } /*=========================*/ /*======= index-1.html =======*/ #page2 #content .col_1{width:503px;} #page2 #content .col_2{width:273px;} /*=========================*/ /*======= index-2.html =======*/ #page3 #content .col_1{width:313px;} #page3 #content .col_2{width:463px;} /*=========================*/ /*======= index-3.html =======*/ #page4 #content .col_1{width:526px;} #page4 #content .col_2{width:250px;} /*=========================*/ /*======= index-4.html =======*/ #page5 #content .col_1{width:313px;} #page5 #content .col_2{width:463px;} /*=========================*/ /*======= index-5.html =======*/ #page6 #content .col_1{width:313px;} #page6 #content .col_2{width:220px;} #page6 #content .col_3{width:243px;} /*=========================*/а что-то стиль CSS не получается выслать...
два раза попробовал...или они (сообщения) у Вас отобразятся?
Слава Богу! Всё выровнял,как хотелось — ссылочки на странице синие, а на footer серые...с утра пораньше лучше работать...за советы спасибо!!! Будьте здоровы. С ув. Михаил. =) =) =)
Ну вот, только пришел, а вы уже свою проблему решили. *CRAZY*
Взаимно.
Олежек, уже другое =) Это какой-то фокус, притом весьма занятный. Делал страничку в вивере о партнерстве в коде первого рисунка «свеча» gif на сайте первую рамку сделал красного цвета, но затем )))))) захотел сменить цвет на синий и как я не менял, как не удалял, прописывал дублями, вообщем вивер отображает синим в disigne и в коде а браузера Opera, IE продолжают отображать красным, хотя в коде его уже и в помине нет. ну конечно обновляю...и прописывал, и цифрами, и словом blue, и даже navy, и дублировал...не ужели не поддерживают браузера...нет в фотошопе и просмотрщиках не пробовал...интересный фокус однако...в чем дело? А? =) =) =)
Нет здесь никакого фокуса. Просто у вас очень плохой исходный код. Много пустых и ненужных тегов. Откажитесь от DreamWeaver. Пишите код вручную, пока не напишите хотя бы 2-3 сайта. Потом, можете начинать работать с DreamWeaver, так как уже будете наблюдать за кодом и сможете удалять все лишнее, что он добавляет.
Смотрим HTML-код с этим изображением:
Смотрим CSS стили:
h3 { color: #900; }Чтобы поменять цвет рамки с красного на синий, нужно заменить в стилях цвет #900 на цвет #00F. Чтобы не нарушить цвет всех заголовков, было бы правильным написать стиль примерно так:
h3 img { color: #00F; }Дело в том, что атрибут bordercolor поддерживается не во всех браузерах, об этом я рассказывал в видеоуроках по HTML.
Всё понял! Олег, как же я это упустил из виду? Начал смотреть код по Вашей записи и заметил, что там же заголовок h3 стоит, он то родимый и вытягивает красный цвет...Ща, я его красавца...видать прежде делал заголовок, а затем поставил изображение...а тег не удалился...действительно bordercolor бывает, что не поддерживается, но я задал нужный цвет через заголовок h6...теперь нормально =) Спасибо за совет.
вот, можно посмотреть как получилось
Отлично! *OK*
Добрый день, Олег. Я скачал у Вас таблицу символов, хорошая штука, наглядно ...А есть у Вас таблицы по тегам, атрибутам, стилям, PHP, HTML, CSS ? Я бы просмотрел или скачал, шаблоны, фоны тоже интересно посмотреть =) ...спасибо, Михаил.
Спасибо. Нету таких таблиц. Про фоны для сайтов и где их достать, я расскажу в бонусном уроке по CSS, а он не за горами 🙂
А про шаблоны? =)
Шаблоны вы можете найти в интернете. Их море. Также возможно я добавлю в бонусы комплект бесплатных готовых шаблонов. 😉
Хорошо, будем ждать...Олег, как вставить в html у которой уже есть фон, поля, изображение разворачивающегося свитка и вводить текст на нем, желательно готика — кириллица...К примеру, как на этом сайте Спасибо, за новый урок...С ув. Михаил.
Этот сайт использует шаблон, который возможно написан с помощью специальных программ, так как в нем много чего лишнего. Это можно было сделать проще.
Как сделать фон с помощью CSS, я рассказывал в соответствующем видеоуроке. Если возникает такая, ситуация, что изображение достаточно сложное и нужно отобразить какие-то углы, то изображение нужно разделить на части.
Например, делим (разрезаем в фотошопе) изображение на 3 части: верхняя и нижняя высотой в 50 пикселей, а средняя будет высотой в 10 пикселей и будет повторяться. Таким третье изображение будет являться фоном для блока с тектом.
Ничего сложного нету и с более большим количеством частей. Если вы посмотрели первые 10 видеоуроков по CSS, то для вас уже не должно быть проблем с версткой. У вас есть знания, просто их нужно применить на практике. Каждый сайт, каждый дизайн — уникален, именно поэтому верстальщик — профессия творческая 🙂
Спасибо за информацию, честно говоря я надеялся на подсказки по коду =) Еще один вопрос, как сделать ссылки в форме кнопки, и как отрегулировать форму кнопки...желательно код =) спасибо.
Олег, обыкновенную кнопку ссылку я могу сделать, а вот чтобы менять ей форму и цвет...дизайн кнопки, более интересует, хотя если и коды, есть интересные...тоже не безразличен...Благодарю, Михаил.
Кнопку делать вы умеете. Более того, можно сделать ссылку, после чего превратить ее в кнопку, сделав ее блочным элементом с помощью CSS. А это 95% всего дела. Потому что цвет, фон, высоту, ширину, размер текста и прочие характеристики для кнопки вы можете задать с помощью таблицы стилей.
Просто пробуйте, не бойтесь эксперементировать и у вас получится!
Для скругления кнопок, можно применить 2 варианта.
1) Делаем фоном прямоугольное изображение, за счет прозрачности по углам, оно кажется овальным. Повторение не задаем (no-repeat).
2) Использовать свойства радиуса.
#button { border: 1px solid #65A3FF; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }Благодарю ...Буду экспериментировать =) И штудировать CSS ...
Олег, у меня к Вам вопрос. В чем может быть причина...Создаю background="picture1.jpg" в вивере при просмотре в браузере отображает. Переношу страницу и изображение на удаленный сервер. При просмотре в интернете не отображает. Менял расширение на png — без результата, прописывал код изображения вручную, безуспешно, переносил по несколько раз и страницу и изображение на удаленный сервер, проверил body никакого цвета не заданно, при просмотре в браузерах и Firefox и IE отображет переношу на удаленный с изображением, не отображает в интернете ни один??? %) Задаю вместо изображения цвет, к примеру bgcolor="#9999FF" отображает и на удаленном...What's a matter? =-O Answer, please...Михаил.
Проверьте путь к изображению.
Олег, пожалуйста...На моем сайте в левой дайджестной новостной колонке, там где и чат, внизу, между новостными строками: «Как преследовали за Библию» и «Приказ о вживлении ЧИПов уже подписан!» будет маленькая, короткая стрелка, которая и является ссылкой, при наведении на нее будет появляться надпись « trial»...По этой ссылке будет находиться страница, на которой я хотел бы предположим, задать background="picture1.jpg" для средней колонки (основной) где «picture1.jpg» допустим, пусть будет иметь значение к примеру, как у тебя в 12 уроке по HTML (там где сиреневые звездочки)...посмотри пож. по коду в HTML в чём причина, где я что-то упускаю? Я уже всяко- его прописывал и в ручную, и в вивере...и думаю, что это будет видно по коду... %) Если можешь. Благодарю, Михаил. Почему в браузерах при просмотре отображается, (переношу и файл, вместе с изображением) но, на удаленном почему-то не отображается???
Понятна ваша ошибка.
body { background-color:picture1.jpg ; }Написано в корне неправильно. Посмотрите еще раз видеоурок. Будьте внимательней, повторяйте все действия за мной. Должно быть так:
body { background-image: url('picture1.jpg'); }Если нужно задать для средней колонки, то задаете фон средней колонке, а не тегу body.
В следующий раз, просьба оставлять комментарии к соответствующему видеоуроку.
спасибо, Олег, конечно...но...прописал его везде!!!!!!!! И всяким образом...и так, как Вы говорили, и...по всякому прописал где только мог и в body , и для колонки...ничего, пока не сдается, но и я не сдамся, буду думать...спасибо буду думать дальше, в чем дело...
Такого изображения нету в корне вашего сайта. Пропишите точный путь к изображению.
ОГРОМНОЕ спасибо за видеоуроки)
Всегда пожалуйста)