Підтеми
Форма входу-->

Каталог статей

Головна » Статті » Paper Site » Coding

Сайтобудування. Зразок сторінки та аналіз HTML коду

 

Шукайте шаблони інших сторінок на PaperSite

РОЗГЛЯНЬТЕ УВАЖНО ДИЗАЙН СТОРІНКИ. Прочитайте текст та перекладіть.

 

CONTENTS

WARNING! THESE LINKS DON'T LEAD ANYWHERE

This is the index page of yor future site. You should use it like a basic template to create similar pages in order to learn html(HyperText Markup Language). If you know how to use basic HTML tags, you are ready to start using CSS elements up to creating an e[ternal CSS file. I've chosen table-based design that is easier than container-based design, however, it gives you the posibility to put you own sizes.

Firstly, download and unzip this file. If we take a look on the structure of our site (THIS SITE), we will see, that on the screenshot it looks like a common folder tree. This is so-called SITE TREE

There are 3 folders: blog, images, portfolio

  1. Blog contains the web-pages of your blog(online dairy) where you can post you thougts about the latest events of your life.
  2. Images contains the images(photoes) for your web-pages
  3. Portfolio contains the web-pages of your projects which show your skills and achivements

There are 4 web-pages: blog.html ; contacts.html ; index. html; portfolio.html. They are in the SITE ROOT FOLDER which is called www2. This is the location of site root folder on my laptop

The root folder CONTAINS ALL THE SITE. The other folders (WebServers\home\localhost) are the folders of DENWER based server.

The MAIN PAGE is index.html - it is the page that contains the links to other root pages:

  • blog.html has the links to the web- pages from the blog folder
  • portfolio.html has the links to the web- pages from the portfolio folder
  • contacts.html doesn't have the links to the web- bages from other folder, but it is bearing the contact information about the developer.

TO MODIFY THIS PAGE:

  1. Save this page on your computer
  2. Open with Blocknote
  3. Analyze and modify the code (look here)
  4. Save as HTML

 

Запитань поки що немає, створіть запитання.

АНАЛІЗ ТА КОМЕНТАРІЇ КОДУ

 ЦЕ HTML код нашої головної сторінки. ЗНАЙДІТЬ знайомі вам ТЕГИ.

ВИКОРИСТАЙТЕ ЦЕЙ БАЗОВИЙ ШАБЛОН ДЛЯ СТВОРЕННЯ інших СТОРІНОК САЙТУ

<!--ЦЕ - теги коментарів, вони не відображаються браузером -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--тип документу-->

 

<html><!--мова розмітки, тип документу-->
<head><!--голова-службова інформація-->
<title>Creating a site</title> <!--заголовок-->  
</head><!--кінець голови-->

<body><!--початок тіла документу-->
<table width="800"><!--початковий тег таблиці заголовку, ширина 800 пікселів-->
  <tr><!--початковий тег табличного ряду-->
    <td><!--початковий тег табличного стовпчика--><img src="images/header1.jpg" width="800" height="100" /><!--тег встановлення зображення із адресою зображення та його розмірами--></td><!--кінцевий тег табличного стовпчика-->
  </tr><!--кінцевий тег табличного ряду-->
</table><!--кінцевий тег таблиці-->

<table width="800" cellpadding="5"><!--початковий тег таблиці із 2 стовпцями: навігація, зміст-->
  <tr>
    <td <!--початковий тег стовпцяі навігація-->width="200" valign="top"<!--"вертикальне вирівнювання верх"-->><h2><strong>CONTENTS</strong<!--жирний шрифт-->></h2><!--початковий тег табличного ряду-->
      <ul><!--початковий тег ненумерованого списку-->
        <li<!--порядковий тег ненумерованого списку-->><a href="index.html"<!--тег гіперпосилання на головну сторінку-->>Home<!--назва сторінки--></a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li><a href="contacts.html">Contacts</a></li>
    </ul></td> <!--кінцевий тег стовпцяі навігація-->
    <td  <!--початковий тег стовпцяі зміст-->width="600"><p>This is the
      
      index page of yor future site. You should use it like a basic template to create similar pages in order to learn html(HyperText Markup Language). If you know how to use basic HTML tags, you are ready to start using CSS elements up to creating an e[ternal CSS file. I've chosen table-based design that is easier than container-based design, however, it gives you the posibility to put you own sizes.</p>
    <p<!--новий абзац-->>Firstly, download and unzip this file. If we take a look on the structure of our site (THIS SITE), we will see, that on the screenshot it looks like a common folder tree. This is so-called SITE TREE</p<!--кунець абзацу-->>
    <p><img src="images/site_tree.jpg" alt="" width="601" height="199" /></p><!--зображення(дивись вище)-->
    <p>There are 3 folders: blog, images, portfolio</p>
    <ol><!--початковий тег нумерованого списку-->
      <li><strong>Blog</strong> contains the web-pages of your blog(online dairy) where you can post you thougts about the latest events of your life.</li><!--порядковий тег нумерованого списку-->
      <li><strong>Images</strong> contains the images(photoes) for your web-pages</li>
      <li><strong>Portfolio</strong>  contains the web-pages of your projects which show your skills and achivements</li>
      </ol><!--кінцевий тег ненумерованого списку-->
    <p>There are 4 web-pages: blog.html ; contacts.html ; index. html; portfolio.html. They are in the SITE ROOT FOLDER which is called<strong> www2</strong>. This is the location of site root folder on my laptop</p>
    <p><img src="images/server_location.jpg" width="577" height="30" /></p>
    <p>The root folder CONTAINS ALL THE SITE. The other folders (WebServers\home\localhost) are the folders of <a href="http://www.denwer.ru/">DENWER</a> based server.</p>
    <p>The MAIN PAGE is index.html - it is the page that contains the links to other root pages:</p>
    <ul>
      <li>blog.html has the links to the web- pages from the blog folder</li>
      <li>portfolio.html has the links to the web- pages from the portfolio folder</li>
      <li>contacts.html doesn't have the links to the web- bages from other  folder, but it is bearing the contact information about the developer.</li>
      </ul>    
    <p>TO MODIFY THIS PAGE:</p>
    <ol>
      <li>Save this page on your computer</li>
      <li>Open with Blocknote</li>
      <li>Analyze and modify the code (<a href="http://skooltimez.ucoz.ua/publ/skool_timez/osnovni_tegi_html_z_ucoz/13-1-0-47">look here</a>)</li>
      <li>Save as HTML</li>
    </ol>    
    </td> <!--кінцевий тег стовпцяі зміст-->
  </tr>
</table><!--кінцевий тег таблиці зміст та навігація-->
</body><!--кінцевий тег тіла документу-->
</html><!--кінцевий тег документу-->

 

 

Категорія: Coding | Додав: Insomniac (11.12.2014)
Переглядів: 279 | Теги: основні HTML коди на прикладі сторі | Рейтинг: 0.0/0
Всього коментарів: 0
Ім`я *:
Email *:
Код *: