2 апта

Алдыңғы аптада HTML танысып, қарапайым HTML файлын жасап және мәтінді өзгертудің кейбір арнайы командаларымен жұмыс жасадыңыздар. Бұл аптада HTML танысуды одан әрі жалғастыра отырып, тағы да бірнеше зертханалық жұмыстар жасайтын боласыздар.

Веб-бетте жазбалардың өлшемдерін өзгерту

Браузер көрсететін мәтін өлшемін басқарудың екі әдісі бар:

тақырып стильдерін қолдану,
негізгі құжаттың қаріп өлшемін немесе ағымдағы қаріп өлшемін анықтау.

Алты түрлі тақырып тегі қолданылады: <H1> -ден <H6> -ға дейін (тег қосарланған, яғни жабуды қажет етеді). Әрбір тег браузерде белгілі бір стильге сәйкес келеді.

Ағымдағы қаріп өлшемін орнату

<FONT> қаріп тегі мәтіннің жекелеген жерлерінде ағымдағы қаріптің өлшемін 1-ден 7-ге дейінгі диапазонда орнатуға мүмкіндік береді.

Гарнитура мен қаріп түсін орнату

<FONT> тегі гарнитураны, мәтіннің түсі мен өлшемін басқаруға мүмкіндік береді.

Мәтін гарнитурасын өзгерту FACE атрибутының <FONT> тегіне қарапайым қосу арқылы жүзеге асырылады. Мысалы, мәтінді Arial шрифтімен көрсету үшін жазу керек:

<FONT FACE=”ARIAL”>

Қаріптің түсін өзгерту үшін <FONT> тегінде Color=”X” атрибутын пайдалануға болады. “X” орнына ағылшын тіліндегі түс атауын ( ” ” ) немесе оның он алтылық мәнін ауыстыру керек. Түсті он алтылық санмен белгілеу кезінде бұл түсті үш компонентке бөлу керек: қызыл (R – Red), жасыл (G – Green), көк (B – blue), олардың әрқайсысы 00-ден FF-ге дейін. Бұл жағдайда RGB деп аталатын формат қолданылады.

RGB форматындағы мәтінді жазу мысалдары кестеде келтірілген:

Зертханалық жұмыс №1.

Мәтін үзінділерін ерекшелеу

Қадам 1. Алдыңғы аптада жасалған Блокноттағы tuesday.HTML Веб-беттің мәтінін ашыңыз (tuesday.HTML файлын тінтуірдің оң жақ батырмасын 1 рет басыңыз, Открыть с помощью… және Блокнот бағдарламасын таңдаңыз).

Қадам 2. tuesday.HTML файлына өзгертулер енгізіңіз.

<HTML>

<HEAD>

<TITLE>HTML оқу файлы</TITLE>

</HEAD>

<BODY>

 <B>сейсенбіге арналған</B>

 <I> сабақ</I>

 <U> кестесі</U>

</BODY>

</HTML>

Қадам 3. Енгізілген өзгерістерді сақтаңыз, браузерде веб-бетті жаңартып, ашыңыз.

Қадам 4. Браузерде пайда болған нәтижеге қарай отырып, HTML кодқа талдау жасаңыз.

Зертханалық жұмыс №2.

Веб-бетте жазбалардың өлшемдерін өзгерту

Қадам 1. Блокнотта tuesday.HTML Веб-беттің мәтінін ашыңыз.

Қадам 2. tuesday.HTML файлына өзгертулер енгізіңіз.

<HTML>

      <HEAD>

           <TITLE>HTML оқу файлы</TITLE>

      </HEAD>

      <BODY>

            <P><H1>сейсенбіге арналған</H1></P>

            <I> сабақ</I><U> кестесі</U>

    </BODY>

</HTML>

Қадам 3. Енгізілген өзгерістерді сақтаңыз, браузерде веб-бетті жаңартып, ашыңыз.

Қадам 4. Браузерде пайда болған нәтижеге қарай отырып, HTML кодқа талдау жасаңыз.

Зертханалық жұмыс №3.

Ағымдағы қаріп өлшемін орнату

Қадам 1. Блокнотта tuesday.HTML Веб-беттің мәтінін ашыңыз.

Қадам 2. tuesday.HTML файлына өзгертулер енгізіңіз.

<HTML>

    <HEAD>

        <TITLE>HTML оқу файлы</TITLE>

    </HEAD>

    <BODY>

       <FONT SIZE=”7″>сейсенбіге арналған</FONT>

       сабақ кестесі

    </BODY>

</HTML>

Қадам 3. Енгізілген өзгерістерді сақтаңыз, браузерде веб-бетті жаңартып, ашыңыз.

Қадам 4. Браузерде пайда болған нәтижеге қарай отырып, HTML кодқа талдау жасаңыз.

Зертханалық жұмыс №4.

Қаріп түсін өзгерту

Қадам 1. Блокнотта tuesday.HTML Веб-беттің мәтінін ашыңыз.

Қадам 2. tuesday.HTML файлына өзгертулер енгізіңіз.

<HTML>

     <HEAD>

         <TITLE>HTML оқу файлы</TITLE>

     </HEAD>

     <BODY>

         <U><I><B><FONT COLOR=”#FF0000″ FACE=”ARIAL” SIZE=”7″>

       сейсенбіге арналған</FONT></B></I></U>  сабақ кестесі

     </BODY>

</HTML>

Қадам 3. Енгізілген өзгерістерді сақтаңыз, браузерде веб-бетті жаңартып, ашыңыз.

Қадам 4. Браузерде пайда болған нәтижеге қарай отырып, HTML кодқа талдау жасаңыз.

Зертханалық жұмыс №5.

Мәтінді көлденеңінен туралау

Қадам 1. Блокнотта tuesday.HTML Веб-беттің мәтінін ашыңыз.

Қадам 2. tuesday.HTML файлына өзгертулер енгізіңіз.

<HTML>

   <HEAD>

      <TITLE>HTML оқу файлы</TITLE>

   </HEAD>

   <BODY>

      <P ALIGN=”CENTER”>

      <FONT COLOR=”#008080″ SIZE=”7″>

      <B>сейсенбіге арналған</B></FONT><BR>

      <FONT SIZE=”6″><I>сабақ кестесі</I></FONT>

      </P>

    </BODY>

</HTML>

Қадам 3. Браузердегі өзгерістерді қараңыз. Экранда сіз суретте көрсетілген нәтижені көресіз.

Қадам 4. Браузерде пайда болған нәтижеге қарай отырып, HTML кодқа талдау жасаңыз.

Алдыңғы сабақ

Course оралу

Келесі сабақ

HTML тілінде сабақ кестесін құру

2 апта