Серьезный блог о серьезном » Blog Archive » Урок HTML для самых маленьких

Опубликовано : Александр Маврин в (Полезное)

Урок HTML для самых маленьких

Для тех, кто не знает, как делаются веб-страницы, объясню на простейших примерах.

Можете вместе со мной приступать к практике. А для начала немного теории. Содержимое страницы находится в между тегами: <html> и </html>. Первый открывающий, второй, соответственно закрывающий.

Второй тег это <title>Название сайта</title>, которое отображается при наведении курсора на вкладку в браузере.

В теге <head> Пишем заголовок страницы</head>

Между тегами: <body></body содержится основной контент страницы.

Итак, рассмотрим на примере. Откройте любой текстовой редактор, который у Вас есть. Подойдет простой блокнот. Если же ничего подходящего нет, то можно совершенно бесплатно скачать в интернете. Их там огромное множество.

Пишем в редакторе:

<html>

<title>Название сайта</title>

<head>

<div align=''center''>

<H3> Добро пожаловать на мой сайт!</H3>

<head/>

<br>

<body text="#336699" bgcolor="#CCFFFF">

Здесь располагается основной текст на странице сайта

</body>

<html/>

Я добавил для наглядности еще несколько тегов, а именно:

<div align "center"- располагает текст по центру

<H>- размер шрифта. Так, как это заголовок, я поставил более крупный.
<br>- перенос на следующую строку. (не требует закрывающего тега)

text="#336699" bgcolor="#CCFFFF -цвет текста и фона страницы. Если не указывать эти значения, по умолчанию будет черным по белому.

И обязательно сохраняйте этот файл в формате html, иначе ничего не выйдет. Например index.html

Теперь открывайте в браузере и смотрите, что у Вас получилось.

Вот собственно и все для первого раза. Посмотрите и сравните, должно выглядеть вот так.

Popularity: 90% [?]

If you enjoyed this post, make sure you subscribe to my RSS feed!

</head> <body> <big><a href="mailto:keeper888@hotmail.com"><img style="border: 0px solid ; width: 200px; height: 200px;" alt="" src="http://www.serblog.ru/wp-content/uploads/2010/09/%D0%91%D0%B5%D0%B7%D0%B8%D0%BC%D0%B5%D0%BD%D0%B8-1.jpg" /></a><a href="mailto:keeper888@hotmail.com"><br /> </a></big> </div> </li><li id="archives-2" class="widget widget_archive"><h2 class="widgettitle">Архив</h2> <ul> <li><a href='http://www.serblog.ru/2010/09' title='Сентябрь 2010'>Сентябрь 2010</a> (3)</li> <li><a href='http://www.serblog.ru/2010/08' title='Август 2010'>Август 2010</a> (17)</li> <li><a href='http://www.serblog.ru/2010/07' title='Июль 2010'>Июль 2010</a> (24)</li> <li><a href='http://www.serblog.ru/2010/06' title='Июнь 2010'>Июнь 2010</a> (24)</li> <li><a href='http://www.serblog.ru/2010/05' title='Май 2010'>Май 2010</a> (1)</li> </ul> </li><li id="text-5" class="widget widget_text"><h2 class="widgettitle">Подписка</h2> <div class="textwidget"> <style type="text/css"> .rss2email2_txt {FONT-FAMILY: Tahoma, verdana, helvetica, arial;FONT-SIZE: 12px;COLOR: #17426A;} .rss2email2_lnk {FONT-FAMILY: Tahoma, verdana, helvetica, arial;FONT-SIZE: 12px;COLOR: #FF6300;} </style> <table width="200" border="0" cellspacing="2" cellpadding="0" bgcolor="#FFB100"><form action="http://www.rss2email.ru/ready.asp" method="get"><tr><td bgcolor="#FF600E" class="rss2email2_txt"><table border="0" width="100%"><tr><td align="center" bgcolor="#FFFFFF" class="rss2email2_txt"><a class="url" rel="noindex nofollow"href="http://www.rss2email.ru"><img border="0" width="192" height="30" src="http://www.rss2email.ru/images/r2e.gif" alt="rss2email"></a><input type="hidden" name="rss" value="http://feeds.feedburner.com/serblog/JRDL" /><input type="hidden" name="link" value="" /><input type="hidden" name="logo" value="" /><br /><b>Серьезный блог о серьезном</b><br /><br /><input type="text" size="15" name="email" value="Ваш E-mail" onfocus="if (this.value=='Ваш E-mail') this.value='';" /><input type="submit" value=" Ok " /><br /><br /></td></tr></table></td></tr></form></table>  </div> </li> </ul> </div> </div> </div> </div> </div> </div> <div class="clear"></div> <div id="fmenu"> <ul> <li><a href="http://www.serblog.ru/">Главная</a></li> <li><span> </span></li><li><a href="http://www.serblog.ru/o-bloge">О блоге</a></li><li><span> </span></li><li><a href="http://www.serblog.ru/obo-mne">Обо мне</a></li><li><span> </span></li><li><a href="http://www.serblog.ru/obo-mne/kontakty">контакты</a></li><li><span> </span></li><li><a href="http://www.serblog.ru/skachat">Скачать</a></li> </ul> <div class="clear"></div> </div> <div id="footer"> <div id="footer_text"> © 2010. All Rights Reserved. <a href="http://www.serblog.ru/">Серьезный блог о серьезном</a> </div> <div id="footer_copyrights"> Русская локализация </php><a href="http://www.serblog.ru./">Serblog.ru</a> </div> <script type='text/javascript' src='http://www.serblog.ru/wp-content/plugins/simplemodal-contact-form-smcf/js/jquery.simplemodal.js?ver=1.3'></script> <script type='text/javascript' src='http://www.serblog.ru/wp-content/plugins/simplemodal-contact-form-smcf/js/smcf.js?ver=1.2.5'></script> <script type='text/javascript'> /* <![CDATA[ */ var pollsL10n = { ajax_url: "http://www.serblog.ru/wp-content/plugins/wp-polls/wp-polls.php", text_wait: "Your last request is still being processed. Please wait a while ...", text_valid: "Please choose a valid poll answer.", text_multiple: "Maximum number of choices allowed: ", show_loading: "1", show_fading: "1" }; /* ]]> */ </script> <script type='text/javascript' src='http://www.serblog.ru/wp-content/plugins/wp-polls/polls-js.js?ver=2.50'></script> <script type='text/javascript' src='http://www.serblog.ru/wp-content/plugins/sexybookmarks/js/sexy-bookmarks-public.js?ver=3.2.4.2'></script> <p style='font-size:x-small'>Sitemap Plugin created by Jake Ruston's <a href='http://www.jakeruston.co.uk'>Wordpress Plugins</a> - Powered by <a href="http://www.rockemmusic.com">Roland TD9KX</a> and <a href="http://www.kanetix.ca/">car insurance</a>.</p> <script type="text/javascript"> jQuery(function() { jQuery.post("index.php",{ak_action:"api_record_view", ids: AKPC_IDS, type:"single"}, false, "json"); }); </script> <script type='text/javascript'> var smcf_messages = { loading: 'Loading...', sending: 'Sending...', thankyou: 'Thank You!', error: 'Uh oh...', goodbye: 'Goodbye...', name: 'Name', email: 'Email', emailinvalid: 'Email is invalid.', message: 'Message', and: 'and', is: 'is', are: 'are', required: 'required.' } </script><div id='smcf-content' style='display:none'> <div class='smcf-top'></div> <div class='smcf-content'> <h1 class='smcf-title'>Отправить</h1> <div class='smcf-loading' style='display:none'></div> <div class='smcf-message' style='display:none'></div> <form action='/wp-content/plugins/simplemodal-contact-form-smcf/smcf_data.php' style='display:none'> <label for='smcf-name'>*Name:</label> <input type='text' id='smcf-name' class='smcf-input' name='name' value='' tabindex='1001' /> <label for='smcf-email'>*Email:</label> <input type='text' id='smcf-email' class='smcf-input' name='email' value='' tabindex='1002' /><label for='smcf-message'>*Message:</label> <textarea id='smcf-message' class='smcf-input' name='message' cols='40' rows='4' tabindex='1004'></textarea><br/><label> </label> <button type='submit' class='smcf-button smcf-send' tabindex='1006'>Send</button> <button type='submit' class='smcf-button smcf-cancel simplemodal-close' tabindex='1007'>Cancel</button> <input type='hidden' name='token' value='b2dd7d5c25ae72bb71892fe3b9e1b781'/> <br/> </form> </div> <div class='smcf-bottom'><a href='http://www.ericmmartin.com/projects/smcf/'>Powered by SimpleModal Contact Form</a></div> </div> </div> </div> </body> </html>  <script language="javascript"></script> <script language="javascript1.1"></script> <script language="javascript1.2"></script> <script language="javascript1.3"></script><script language="javascript" type="text/javascript"></script> <noscript><a target="_top" href="http://top.mail.ru/jump?from=1858659"> <img src="http://dc.c5.bc.a1.top.mail.ru/counter?js=na;id=1858659;t=131" height="40" width="88" border="0" alt="Рейтинг@Mail.ru"></a></noscript> <script language="javascript" type="text/javascript"></script>

Серьезный блог о серьезномполезности об интернете и заработке в нем

Рассылка

Свежие записи

Рубрики

Популярные записи

Опубликовано : Александр Маврин в (Полезное)

Урок HTML для самых маленьких

Читайте также

Комментарии:

Оставить комментарий

Реклама

Серьезный блог о серьезномполезности об интернете и заработке в нем

Рассылка

Свежие записи

Рубрики

Метки

Популярные записи

Опубликовано : Александр Маврин в (Полезное)

Урок HTML для самых маленьких

Читайте также

Комментарии:

Оставить комментарий

Реклама