Я вас всех радостно приветствую, мои дорогие друзья. Сегодня с вами как всегда Дмитрий Костин, и у меня для вас небольшой сюрприз, а именно экзамен! Хотя ладно, насчет экзамена я пошутил. Просто я решил закончить уроки по основам html и в этой статье применить знания, полученные на предыдущих уроках на практике.
Я хочу вам показать простой пример создания сайта html в блокноте Notepad++ за считанные минуты. Конечно сайтик мы создадим простой, не замороченный, быстрый, и я бы даже сказал лоховской (простите за мой французский))). Но все же, благодаря этому вы сможете закрепить полученные знания. Это действительно важно в этом деле.
Только не забудьте при создании нового документа в Notepad++ перекодировать его в UTF-8.
Вы спросите: «А почему так мало уроков? В html гораздо больше тегов и атрибутов». Да-да, вы действительно правы, но время идет и многие теги уже не работают в последних версиях html, либо же просто считаются ненужными и ими никто не пользуется.
Вот например есть тег , который отвечает за шрифт. Благодаря ему и атрибутам, можно изменять внутренний контент, например размер шрифта, цвет, сам шрифт. Но сегодня, как я уже и сказал, не принято использовать. Такой код уже не будет являться валидным. Вместо этого мы используем CSS. Это намного удобнее и практичнее. Ну да ладно. Давайте лучше приступим созданию сайта.
Я в документе отметил те места, где вы должны будете эти списочки делать, но конечно же на всякий случай я покажу как это должно выглядеть.
Сохраняем и смотрим, что у нас получилось. Вроде все как надо. Отлично. Уже продвинулись далеко вперед.
Откройте в блокноте страницу table.html , перетащите из одноименного вордовского документа все заголовки и текст, после чего расставьте все теги и атрибуты как надо.
Вот теперь переходим к тому, что нам нужно. Создаем таблицу в 5 строк и 5 столбцов, после чего вставляем в них соответствующие значения. Не забываем ставить нужные атрибуты, а именно border="2", cellpadding и cellspacing по 5. В коде это должно выглядеть примерно так:
Сохраняем и смотрим, что у нас получилось. Всё отлично!
Мы уже почти всё сделали. Нам только осталось закончить страницу об авторе. Зайдите в страницу obo-mne.html и вставьте из одноименного вордовского документа весь текст со всеми заголовками и расставьте теги.
Короче, теперь после тегов шапки сайта и менюшек вам нужно будет прописать адрес этой картинки и поставить атрибут align="left" , что текст оплетал фотографию. Если выглядит некрасиво, то можно поиграться с отступами на несколько пикселей. Примерно это должно выглядеть так.
Все сделали? Всё получилось? Я надеюсь, что да. Но теперь нам нужно . В документе ссылка есть. Всё, что вам нужно — это просто вставить ее после основного текста. Если вдруг видео налезает на фотографию автора, то просто после текста сделайте парочку отступов с помощью
.
Ну вот вроде бы и всё. По заданию всё выполнено и теперь у вас есть такой простенький html сайт, сделанный в блокноте Notepad++ буквально за 10-15 минут. Несмотря на то, что это наипростейший html каркас без CSS свойств и других приблуд, оказывается до сих пор существуют люди, которые продают курсы аля «Как создать сайт» с информацией, подобной этой. Причем берут за это деньги — и 500 рублей, и даже 2000. Я просто в шоке!)
Уж если и брать какие-то курсы, то лучше у профессионалов, которые собаку на этом съели. Лично я рекомендую вам посмотреть курс Андрея Бернадского "HTML5 и CSS3 с нуля до гуру ". Курс просто потрясающий, несложный в освоении и рассчитанный на любой уровень пользователя. Благодаря ему вы реально научитесь верстать довольно неплохие сайты.
Кстати как ваши ручки? Надеюсь, что вы не филонили и всё прописывали своими чудесными ручками. Я надеюсь, что каши в голове у вас нет и я все нормально объяснил. Ну а если у вас что-то не получилось, то в папке лежит готовая версия нашего сайта со всеми комментариями, чтобы вы смогли разобраться.
Фух. В общем на сегодня я всё. Воды сегодня выпил литра 4 наверное из-за жары. Так что надеюсь, что вам моя статья понравилась и была полезной в плане изучения. Не забывайте подписываться на новые статьи моего блога. Я вам расскажу еще много всего интересного. А вам я желаю удачи и спокойно перетерпеть жару. Ну а я пошел охлаждаться. Увидимся. Пока-пока!
С уважением, Дмитрий Костин.
В современном мире порой иметь собственный сайт также важно, как например, наличие номера телефона или адреса электронной почты. К сожалению, не каждый самостоятельно может сделать себе красивый профессиональный сайт, а порой даже и кривой не получается. Заказывать у программистов тоже не идеальный выход, так как не всем это по карману.
Из такой ситуации помогут выйти бесплатные HTML шаблоны сайтов. HTML шаблон сайта – это набор уже готовых статических страниц для сайта определенной тематики. С помощью такого шаблона, создать простой сайт можно буквально за пару часов, при наличии базового знания HTML разметки. В разделе HTML Вы получите эти знания, если потратите еще пару часов на изучения, а если не пожалеете время на раздел CSS, то сможете полностью управлять дизайном HTML шаблонов сайтов и настраивать их полностью под свои нужды.
Еще одним неоспоримым плюсом шаблонов сайтов является, то что их пишут в большинстве случаев профессионалы. Под профессиональным шаблоном сайтом понимается не только красивый и современный дизайн, но и так как написан код. Поисковые системы смотрят, как у Вас написан сайт, SEO оптимизирован код или нет, на основании этого понижают или повышают Ваши позиции в выдаче. Поэтому хороший сайт должен быть не только красивый и современный, что немаловажно, но и грамотно написан в плане кода.
Скачивайте бесплатные HTML шаблоны сайта и создавайте свои проекты в кратчайшие сроки.
Итак. Пришло время создать нечто более сложное, чем мы делали до этого, но используя полученные знания в предыдущих уроках.
В этом уроке курса MM часть 1 мы сделаем 2-страничный сайт...например, о заработке в интернете.
Сначала определимся, как это будет приблизительно выглядеть.
Вверху сайта мы сделаем "шапку сайта". Слева будет меню сайта с ссылками на другие страницы сайта, остальное место будет занимать контент (содержимое) сайта.
Идея понятна? Приступаем.
Запускаем Блокнот и пишем наш минимальный набор для создания страницы .
Теперь напишем между тегами
Далее разместим теги
Для создания каркаса страницы мы будем использовать таблицу, но чуть более хитрую, чем мы проходили в HTML-уроке о таблицах . Нам нужна таблица, в которой в первой строке будет 1 ячейка, а в другой строке будет 2 ячейки, т.е. вот такая нам нужна таблица:
В ячейке 1 мы расположим шапку сайта, в ячейке 2 будет меню сайта, а в ячейке 3 будет содержимое страницы.
Для того чтобы сделать такую таблицу, напишите вот такой код
Т.е. код нашей страницы будет вот такой:
Как видите, в такой вот "хитрой" таблице используется лишь 1 пара тегов
Так. Теперь зададим размеры таблицы. Ширину таблицы сделаем 750 пикселей. Из расчета, что кто-то из посетителей сайта может использовать монитор 800х600 точек, и просматривать более широкий сайт ему будет некомфортно.
Высоту таблицы сделаем 600 пикселей
Т.е. код нашей страницы теперь будет вот такой.
Здесь у нас будет шапка
Здесь будет меню
Чтобы стало видно границы частей сайта - "зальем" область меню и область шапки цветом. Например, вот так
Здесь
у нас будет шапка
Здесь будет меню
Здесь будет содержимое страницы
Сохраните файл под именем index.html , для того чтобы его можно было просмотреть, как он будет выглядеть в браузере.
Теперь вставляем картинку шапки в наш сайт. О том, .
Здесь будет меню
Здесь будет содержимое страницы
Теперь установим точные размеры ячейки таблицы, предназначенной для шапки. Т.к. картинка шапки у нас имеет размер 750х120, то и размер ячейки таблицы сделаем 750 х 120.
Здесь будет меню
Здесь будет содержимое страницы
ТАК .
Установим ширину меню равной 200 пикселей, для этого добавим width="200" в соответствующий тег
Здесь будет меню
Здесь будет содержимое страницы
Задний план меню "зальем" вот таким фоном, для этого сохраните этот фон с его "родным" именем sv11.jpg в ту же директорию, где находится файл страницы.
А теперь прописываем нужный код
Здесь будет меню
Здесь будет содержимое страницы
Теперь наша страница будет выглядеть ТАК .
У вас, возможно, возник вопрос, почему браузер не "отрабатывает" ширину меню 200? Меню ведь выглядит шире, чем 200 пикселей. Да. Есть такой глюк браузера, но все встанет на свои места, если начать писать текст в основном разделе страницы. (Или можно задать жестко ширину ячейки, в которой будем писать контент, дописав width="550" )
Чтобы подтвердить это, добавим текста на наш сайт.
Здесь будет меню
Теперь все почти ОК...Почти, потому что налицо небольшие проблемки. Текст отображается ровно посередине (по вертикали), а следовало бы, чтобы текст был расположен вверху ячеек.
Для этого нам надо прописать еще один параметр в теге
Этот параметр мы не проходили в уроке о таблицах , - это параметр выравнивания по вертикали valign="top".
Значение top означает, что содержимое будет располагаться вверху.
Здесь будет меню
Этот сайт посвящен
заработку в интернете. Если вы совсем новичек, то этот сайт поможет вас сориентировать
и подскажет где и как можно заработать в сети.
Теперь наша страница будет выглядеть ТАК .
Главная
Этот сайт посвящен заработку в интернете. Если
вы совсем новичек, то этот сайт поможет вас сориентировать и подскажет где и
как можно заработать в сети.
Теперь надо сделать текст меню в виде ссылок. Слово Главная залинкуем на страницу index.html, а слово Ссылки на страницу ssilki.html, которую мы создадим чуть позже.
Главная
Ссылки
Этот сайт посвящен заработку в интернете. Если
вы совсем новичек, то этот сайт поможет вас сориентировать и подскажет где и
как можно заработать в сети.
Теперь наш сайт будет выглядеть ТАК .
Осталось сделать вторую страницу сайта. Для того чтобы упростить работу, сделаем так - сохраним нашу страницу index.html под другим именем ssilki.html, а затем подредактируем файл.
Т.е. на компьютере у вас должно быть 2 пока что одинаковых страницы - index.html и ssilki.html.
Теперь изменим название страницы (между тегами
Главная Сайт
о заработке в интернете MoneyMaster
На этой странице будут
размещены ссылки на сайты о заработке в интернете