Пример написанного сайта

Верстка страниц

=== Скачать файл ===

Сегодня с вами как всегда Дмитрий Костин, и у меня для вас небольшой сюрприз, а именно экзамен! Хотя ладно, насчет экзамена я пошутил. Просто я решил закончить уроки по основам html и в этой статье применить знания, полученные на предыдущих уроках на практике. Конечно сайтик мы создадим простой, не замороченный, быстрый, и я бы даже сказал лоховской простите за мой французский. Но все же, благодаря этому вы сможете закрепить полученные знания. Это действительно важно в этом деле. Да-да, вы действительно правы, но время идет и многие теги уже не работают в последних версиях html, либо же просто считаются ненужными и ими никто не пользуется. Благодаря ему и атрибутам, можно изменять внутренний контент, например размер шрифта, цвет, сам шрифт. Такой код уже не будет являться валидным. Вместо этого мы используем CSS. Это намного удобнее и практичнее. Давайте лучше приступим созданию сайта. Скачайте отсюда необходимые файлы для работы. Конечно в данной статье я помогу вам справиться с этим заданием, но я всё же надеюсь, что вы попытаетесь все сделать сами, так сказать ручками, чтобы набить их. Самым первым заданием вы должны сделать стандартную структуру html-документа. Помните, как ее делать? Это я рассказывал еще тогда, когда мы создавали наш первый сайт html в блокноте. Вам всего лишь нужно поставить главные теги. Если у вас возникли проблемы, то конечно можете посмотреть на картинке, но в виде текста я это выкладывать не буду, чтобы вы могли всё делать руками, а не тупо копировать и вставлять. И кстати, сделайте три разные копии со структурой и обзовите их как-нибудь index. В документах я пометил те предложения, которые должны быть заголовками, так что ваша задача будет состоять в том, чтобы эти заголовочки разных уровней в нужных местах проставить и отцентрировать их. Я думаю, что вопросов с этим ни у кого не должно возникнуть, так как не так давно мы проходили заголовки в html. Вставьте заголовки из документа index. Если проблемы все таки возникают, то смотрите на скриншот ниже, как это всё должно выглядеть. Но только смотрите, если у вас что-то не получается. Теперь переходим к следующему заданию. В этом задании вам нужно правильно разделить текст на абзацы. А как это сделать? Это мы проходили в данной статье , так что если вы не помните, то обязательно повторите. Но на самом деле это легче легкого. Давайте теперь на каждой странице нашего сайта сделаем небольшое меню. Вообще, если честно, то таким образом меню уже мало кто делает. Я уже упоминал в статье про маркированный список, что с помощью этого самого списка обычно и делают пункты меню, но только с применением CSS. И вы не волнуйтесь. Я обязательно позже расскажу и про CSS и как с ним работать. Но сегодня мы делаем таким топорным методом чисто для примера, не более того. Так что зайдите в папку img. Там вы увидите 3 файла в формате png. Их-то нам и нужно будет вставить на каждую страницу нашего html сайта. Для этого вам надо открыть страницу index. Когда вы сохраните всё это дело, то у вас в верху страницы должны появиться три надписи: Главная, Таблица, Обо мне. Пока это просто ничего незначащие картинки, которые нам надо будет превратить в ссылки. Мы уже проходили как делать гиперссылку в html , но еще пока не делали ее в качестве картинки. Вот давайте и на практике потренируемся. Ссылки мы будем вставлять на соответствующие страницы. Смотрите как я сделал это у себя. Я думаю, что вам должно быть всё понятно. Теперь сохраните документ, войдите на главную страницу index. Всё круто, всё работает. Ну на самом деле любой сайт будет смотреться некрасиво, не будь у него какой-нибудь даже минималистической шапки. Поэтому нам нужно будет ее вставить. В папке img я подготовил и картинку для шапки, которая называется header. Вот эту вот шапочку нам нужно вставить на все страницы нашего сайта, так же как и в случае с менюшками. Кстати советую вам подогнать размер под другое разрешение, потому что я выложил картинку довольно большую. Ну это я поставил для примера. Вы можете использовать свои параметры. Без этого чуда мы с вами сегодня тоже не обойдемся. Всё помнят, как ставить маркированный или нумерованный список? Если нет, то можете освежить свои знания здесь и здесь. Я в документе отметил те места, где вы должны будете эти списочки делать, но конечно же на всякий случай я покажу как это должно выглядеть. Сохраняем и смотрим, что у нас получилось. Вроде все как надо. Уже продвинулись далеко вперед. Откройте в блокноте страницу table. Вот теперь переходим к тому, что нам нужно. Создаем таблицу в 5 строк и 5 столбцов, после чего вставляем в них соответствующие значения. В коде это должно выглядеть примерно так:. Мы уже почти всё сделали. Нам только осталось закончить страницу об авторе. Зайдите в страницу obo-mne. Теперь нам нужно вставить фотографию автора. В папке img я для вас припас одну такую. Она носит название autor. Если выглядит некрасиво, то можно поиграться с отступами на несколько пикселей. Примерно это должно выглядеть так. Я надеюсь, что да. Но теперь нам нужно вставить видео из ютуба в html-документ. В документе ссылка есть. Ну вот вроде бы и всё. Я просто в шоке! Уж если и брать какие-то курсы, то лучше у профессионалов, которые собаку на этом съели. Лично я рекомендую вам посмотреть курс Андрея Бернадского ' HTML5 и CSS3 с нуля до гуру '. Курс просто потрясающий, несложный в освоении и рассчитанный на любой уровень пользователя. Благодаря ему вы реально научитесь верстать довольно неплохие сайты. Кстати как ваши ручки? Надеюсь, что вы не филонили и всё прописывали своими чудесными ручками. Я надеюсь, что каши в голове у вас нет и я все нормально объяснил. В общем на сегодня я всё. Воды сегодня выпил литра 4 наверное из-за жары. Так что надеюсь, что вам моя статья понравилась и была полезной в плане изучения. Не забывайте подписываться на новые статьи моего блога. Я вам расскажу еще много всего интересного. А вам я желаю удачи и спокойно перетерпеть жару. Ну а я пошел охлаждаться. Как то для меня это сложновато, я думаю в моем случае лучше обращаться к людям которые умеют это делать!! Может быть и такое. Вспомнилось мне, когда я ходил на курсы по html, там был один паренек лет 18, который после второго урока сказал, что это он никогда не осилит и переоформился на курсы флористики, проходившие на другом этаже. Я могу с уверенностью заявить, что html намного проще английского. Вообще за месяц можно выучить, а если по курсам таких ребят как Web4myself, то еще быстрее. С английским такое не прокатит. Вот не мог я пройти мимо этой статьи. Дим не тольк font в твоей стате устаревший, тег br, width, align все это устаревшее, все идет через файл стилей. И в самом начале должно быть что-то вроде. Ну на счет тега br не согласен, перенос строки по-моему еще актуален. А так да, все устаревшее, но все равно полезно знать для понимания работы атрибутов в html. Я вот начал изучение html с какого-то старого сайта, где уроки были хорошие, но сама информация сильно устарела. Потом новые знания было принять гораздо проще, когда получена база. Если честно, Валь, то даже не знал, что они устарели, хотя сам понимаю, что этим уже толком никто не пользуется. Но вроде как эти теги спецификацией html не осуждаются в отличие от font, center и др. Просто по htmlbook я всё равно стараюсь сверяться. Так и атрибуты тегов тоже лучше в контенте не прописывать. А то потом захочется заголовки от центра к левому краю перенести, а у них И кстати, есть же относительно новые теги: Я хочу получать уведомления на почту. Помогу вам найти общий язык с компьютером, даже если вы впервые слышите это слово. Выберите рубрику блога Adobe Photoshop Android и мобильные технологии Microsoft Excel Microsoft Powerpoint Microsoft Word Жизнь вне блога Компьютер и здоровье Работа в Windows Работа в интернете Работа с компьютерными программами Расслабон за компьютером Создание сайтов Теория, обзоры и мнения Финансы и заработок за компьютером Эксперименты и обучение Экстра-новости из мира интернета и IT. Главная Все статьи О блоге Об авторе Рекомендую Конкурсы Реклама Услуги Контакты. Самый классный видеокурс по фотошопу. Подпишись на обновления блога. Как проще простого загрузить фото в инстаграм через компьютер тремя классными способами? Мои успехи в качестве Мастера социальных проектов. Объявляю первый конкурс от koskomp: Простой пример создания сайта на языке html в блокноте буквально за несколько минут Автор: Структура Самым первым заданием вы должны сделать стандартную структуру html-документа. Заголовки В документах я пометил те предложения, которые должны быть заголовками, так что ваша задача будет состоять в том, чтобы эти заголовочки разных уровней в нужных местах проставить и отцентрировать их. Абзацы В этом задании вам нужно правильно разделить текст на абзацы. Меню Давайте теперь на каждой странице нашего сайта сделаем небольшое меню. Шапка Ну на самом деле любой сайт будет смотреться некрасиво, не будь у него какой-нибудь даже минималистической шапки. После этого по традиции смотрим, что у нас получилось. Маркированный и нумерованный списки Без этого чуда мы с вами сегодня тоже не обойдемся. Вставка таблицы Откройте в блокноте страницу table. В коде это должно выглядеть примерно так: Страница об авторе Мы уже почти всё сделали. С уважением, Дмитрий Костин. Этот блог читают уже более человек, которые решили покончить с компьютерной неграмотностью. Как можно легко придумать доменное имя для сайта? Webformyself действительно по полочкам всё раскладывают. Каши в голове больше, чем мыслей! Ну а вообще да. Сейчас уже всё через CSS настраивается. Оставить коментарий Отменить ответ.

Где выучиться на маляра

Скрытые фигуры основан на реальных событиях

Рэу факультет экономики и права