Up next
Author
Tags

Веб-беттегі мәтінді өңдеу 3 сабақ.

Сіз мәтіндік редакторларға құжаттарды бірнеше рет терген боларсыз…. не істей аласыз сол Word-мәтінімен жұмыс істегенде әрлеген тексттерде веб-беттеде жасауға болады.

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

Параграф

Сіз параграфтың не екенін біледі деп ойлаймын. Ол мәтіндік бөлік, бір немесе бірнеше бөлім. Кітаптарда әдетте жаңа жолда басылады, осылайша бұл мәтінді жаппай бөлектейді.

Сонымен, мәтінді сайт бетіндегі абзацтарға бөлу үшін <p> – тегін пайдалану керек. Тегте арнайы орнын жылжыту үшін align “туралау”  атрибуты бар. Ол өз кезегінде мынандай мәндерге тең болуы мүмкін.

Мысалдарға мән береміз:

Біздің текстті параграфтың көмегімен ортаға қоя аламыз.
Ортаға:

<p align=”center”>Сәлем әлем</p>

Сол жаққа:

<p align=”left”>Сәлем әлем</p>

Оң жаққа:

<p align=”right”>Сәлем әлем</p>

Немесе құжаттың екі жағына қою үшін:

<p align=”justify”>Сәлем әлем(Мұнда көбірек текст жазыңыз, себебі бұны түсіну үшін)</p>

<html>

<head>

<title>

Менің алғашқы сайтым

</title>

</head>

<body>

<p align=»center»>Сәлем әлем!!!</p>

<br>

<p align=»justify»>

Менің есімім Нұржан. Бұл менің ең бірінші веб-бетім. Мен мұнда жаңа достар табуды қалаймын, бірге қыдыру үшін, мен вареньені өте жақсы көремін. Мен сізді бірге дастарханда шай ішіп, бағдарламалау жайында әңгімелесу үшін күтемін.

</p>

</body>

</html>

Кейбір нәрселерді еске сақтап жүріңіз…

  1. <p>-тегінің ішіне тег қолдануға болмайды! .

<p>

<p>

</p>

</p>

Бұл тыйым салынған, қалай бір абзац келесі абзацты қамтуы мүмкін?

  1. Сонымен қатар бос тегтерді мәтінсіз немесе басқа тегтерсіз жаза алмайсыз.                  <p>Міндетті түрде мәтін болуы керек!</p>
  2. Әдепкі жағдайда браузер сіздің мәтініңізді сол жаққа жылжытады, <p align=”left”>Дәл осындай қалыпта</p>
  3. <p> тегі жолдың үзілуін білдіреді, егер сізге қажет болмаса оның орнына <div>-тегін пайдаланыңыз! <p>-тегі <div>-тегіне балама болып келесі түрде бекітілген. <div align=»center»>Сәлем әлем!!!</div>
<div align=»left»>Сәлем әлем!!!</div>
<div align=»right»>Сәлем әлем!!!</div>
<div align=»justify»>Сәлем әлем!!!</div>

Барлығы бірдей, тек осы тег мәтінді келесі жолға және оған жібермейді

<p > тегін принцип бойынша енгізуге болады:

<div>

<p align=»left»>Сол жаққа жазылады</p>
<p align=»right»>Оң жаққа жазылады</p>

</div>

<div>-тегі көп функционалды және ол жәй өзі бос контейнор болып қалады, мәтінде басқа тегтерде болуы мүмкін контейнер, жалпы  мәтінмен жұмыс істеу <div> -тегінің негізгі қызметінен алыс, ал қалған қызметі жайында алдағы уақытта айтатын боламыз.

  1. Мәтінді ортаға орналастырудың тағы да бір жолы бар, ол <center>-тегімен жүзеге асырылады. Осылай жазылады: <center>Сәлем әлем!!!</center>

Тақырып(заголовок)

<h1>Сәлем әлем!!!</h1>

<h2> Сәлем әлем!!!</h2>

<h3> Сәлем әлем!!!</h3>

<h4> Сәлем әлем!!!</h4>

<h5> Сәлем әлем!!!</h5>
<h6> Сәлем әлем!!!</h6>

<hx>-тақырып үшін арналған тег, мұндағы х-мәні бірден алтыға дейін болуы мүмкін.

Есіңізде болсын,осы немесе басқа тақырыпты қолданғаннан кейін жол беріледі, себебі ол тақырып.

Тақырыптар жақсы және өте ыңғайлы, бірақ олар тек кішкентайларды ерекшелей алады, ал бізге мәтін арасындағы сөздерді ерекшелеу қажет болса ше?

<font>- тегімен танысамыз,ағылшын тілінен аударғанда шрифт деген мағынаны білдіреді.

Тегте арнайы мәтіннің өлшемін өзгерту үшін size -атрибуты бар.

Жазылуы және көрінуі:

<font size=»+4″>Сәлем әлем!!!</font>

<font size=»+2″>Сәлем әлем!!!</font>

<font size=»+0″>Сәлем әлем!!!</font>

<font size=»-1″>Сәлем әлем!!! </font>

<font size=»-2″>Сәлем әлем!!!</font>

Біздің веб-бетімізге тегті қосамыз…

<html>

<head>

<title>

Менің алғашқы сайтым

</title>

</head>

<body>

<center><h2>Сәлем әлем!!!</h2></center>

<br>

<p align=»justify»>

<font size=»+1″> Менің есімім Нұржан. Бұл менің ең бірінші веб-бетім. Мен мұнда жаңа достар табуды қалаймын, бірге қыдыру үшін, мен вареньені өте жақсы көремін.

<font size=”+2”> Мен сізді бірге дастарханда шай ішіп, бағдарламалау жайында әңгімелесу үшін күтемін.</font>

</font>

</p>

</body>

</html>

Қаріп өлшемдерімен мен тақырыбымен тәжірибе жасап көріңіз, өзіңізді ауыстырыңыз мәндер тегтердің орнын өзгертіңіз т.с.с.

Түс.

Веб-бетке арнайы көрініс беру үшін, сіз бояғыштарсыз және бояуыштарсыз жасай алмайсыз. Html тілінде өзіндік түстер палитрасы қолданылады. Міне, негізгі түстер, олар келесідей көрінеді:

Black – #000000

,

White – #ffffff

Егер текстті ерекшелесеңіз ақ түсті байқайсыз.

Red – #ff0000,
Orange –  #ffa500,
Yellow – #ffff00,
Green #008000
Blue – #00ffff,
 purple – #800080

Бірдей түсті екі жолмен орнатуға болады.

RGB түсінің он алтылық мәнін қолдана отырып-мысалы #008000-жасыл түсті, немесе

түс константаларын қолдану-жасыл (француз тілін үйренгендер үшін жасыл-жасыл.)

<font color=»#ff0000″>Сәлем әлем!!!</font> Мәтіннің түсі қызылға боялады, жасап көріңіз.

Осылай да жасауға болады:

<font color=»red»>Сәлем әлем!!!</font> екеуі бірдей нәтиже.

Бірақ мен сізге он алтылық санмен жазуға кеңес беремін, біріншіден, белгілі себептермен

түстердің барлық реңктері үшін оның атауы бар, екіншіден, олар барлық браузерлер емес деп айтады, себебі атауын біледі, сол немесе өзге де бояулар…

Тағы бір түстерді қоюдың жеңіл әдісі бар, <body> – тегіндегі атрибутқа түс береміз, яғни ол барлық мәтінге қатысты тегтер бірдей түс беріледі, ал сізге кейбір тегтердің түсін өзгерту керек болса, ол өзгереді.

<body> – ашылған тегке атрибутты осылай жазамыз:

<body text=»#ff8c40 «>

Бізде барлық мәтінге қатысты тегтердің түсі, қызғылт сарыға боялады.

<body>- тегінің bgcolor(background-color) атрибутының қызметі-барлық веб-беттің түсін өзгертеді.

<body bgcolor=»#40caff»> Барлығын көк түске бояйды.

Бетті өз қолыңызбен жазыңыз, көріңіз, тәжірибе жасаңыз.

Енді сіз HTML кодын құру принципін түсінуіңіз керек, әйтпесе ерте ме, кеш пе

Практикасыз түсіну қиын, әрине, мен дайын мысалдарды қоямын, бірақ одан жақсы ештеңе жоқ, өзіндік тәжірибе.

Қазіргі уақытта мен дәл осылай жасадым, ал сіз ше?

<html>

<head>

<title>

Мой первый сайт

</title>

</head>

<body text=»#484800″ bgcolor=»#008000″>

<center>

h2>

<font color=»#008000″>Сәлем әлем!!!</font>

</h2>

</center>

<p align=»justify»>

<font size=»+1″>Менің есімім Нұржан. Бұл менің ең бірінші веб-бетім. Мен мұнда жаңа достар табуды қалаймын, бірге қыдыру үшін, мен вареньені өте жақсы көремін.<font size=”+2”> Мен сізді бірге дастарханда шай ішіп, бағдарламалау жайында әңгімелесу үшін күтемін.

</font>

</p>

</body>

</html>

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

Және, сізге жаңадан тегтер:

<b> </b> – Қалың мәтін

<i> </i> – Ирелеңдеген мәтін

<u> </u> – Асты сызылған мәтін

<strike>

</strike>

– Сызылған

<s> </s>

– Сызылған (екінші нұсқа, біріншіден ештеңе жоқ

әр түрлі)

<tt> </tt> – Моноширлі қаріп

<small>

</small>

– Кіші мәтін

<big> </big> – Үлкен мәтін

<sup> </sup> – Жоғарғы индекс

<sub> </sub> – Төменгі индекс

Менің ойымша, бұл түсінікті.. осы ашылатын және жабылатын тегтердің арасындағы мәтін

бізге қажет стиль пайда болады.

Мұндай мысал келтірген жағдайда:

<html>

<head>

<title>Текст стилдері</title>

</head>

<body>

<big><b><u>Ғылыми мақала.</u></b></big>

<br>

<br>

Егер тазартылған суды H<sub>2</sub>O қырық пайызмен сұйылтсаңыз

этил спирті содан кейін С<sub>2</sub>Н<sub>5</sub>ОН сұйықтық алынады

40 арақ <sup>деген</sup> атпен көпшілікке танымал.

Бұл пропорцияны алғаш рет <tt>Дмитрий Иванович

МЕНДЕЛЕЕВ.</tt><s>ұсынды</s>

<br>

<br>

<br>

<small> Алкогольді ішу сіздің денсаулығыңызға зиян тигізеді.</small>

</body>

</html>

Шрифт

Құжаттың қаріпін өзгерту үшін браузерге нұсқау беру керек, біз ол үшін <font>-тегін және оның <face>-атрибутын қолданамыз.

Былай жазылады:

<font face=»arial»>Бұл бетте Arial-қаріпі қолданылады</font>

Мысалы:

<html>

<head>

<title>

Әр түрлі қаріптерді қолдану

</title>

</head>

<body>

<font face=»arial»>

Мұндағы мәтін Arial-қаріпінде болады.

</font>

<br>

<font face=»times new roman»>

Мұндағы мәтін Times New Roman – қаріпінде болады.

</font>
<br>

<font face=»comic sans ms»>

Мұндағы мәтін Comic Sans ms – қаріпінде болады.

</font>

<br>

</body>

</html>

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

Алдын ала пішімделген мәтін.

Егер сіз назар аударсаңыз және назар аудармасаңыз, шолғыштарда терілген мәтін екенін біліңіз. Мәтіндік редакторлардың көмегімен оны компьютер экранына шығарар алдында өңдеуден өтеді. Сонымен, сіз терген мәтінде барлық жолдар мен қосымша бос орындар, арасындағы бос орындар жойылады сөздер немесе жай таңбалар біреуден аспауы мүмкін.

Бұл» өңдеу » экранның әр түрлі кеңеюі бар мониторларда жүзеге асырылады мәтін келесі жолға ауыстырылды, бұл шынымен қажет болған жерлерде емес бұрын Бос орындар мен сызықтардың ауысуы болған жерде.

Алайда, браузерлердің мұндай саясаты, кейбір жағдайларда, әрдайым ақталмайды.. Мысалы сияқты,жазу өлеңдер? Әрине, әр жолдан кейін <br> тегін жаза алмайсыз, бірақ мұнда опция бар оңай..

<pre> – тегімен танысайық, осы тегке енгізілген мәтін браузерлермен экранға шығарылады, ол терілген түрінде, яғни барлық бос орындар мен абзацтар солгүйі тасымалданады.

<html>

<head>

<title>Пробелы и перенос строки</title>

</head>

<body>

<pre>

СЛОН.

Дали туфельки слону.

Взял он туфельку одну

И сказал: – Нужны пошире,

И не две, а все четыре!

С. Я. Маршак.

</pre>

</body>

</html>

Міне осындай жағдайлар…

Пайдалы кеңестер

Әрине, сіз блокнотта web-беттер жаза аласыз, бірақ Мен сізге кеңес беремін толық HTML редакторын қолданыңыз, олардың бағдарламалық жасақтама нарығында пайдасы бар. Мен ол жайында егжей-тегжейлі сипаттамасын бермеймін, тек олар, әдетте, олар бірдей стандартты құралдар жиынтығын алып жүреді және мүмкін бір-бірінен ерекшеленеді тек интерфейс.. мен оларды салыстыра алмаймын, -өйткені әр редактордың өзіндік ерекшелігі өте көп.

Мен сізге осындай редакторды қолданудың негізгі артықшылықтары туралы айтып беремін.

o Әдетте, html редакторларында екі терезе бар, біреуінде сіз код жазасыз, ал екіншіден, жазылғанның нәтижесін бірден көріңіз! Яғни, енді сіз үнемі келмейсіз ағымдағы нәтижені браузермен ашу және жазылғанды бағалау үшін сақтау.

o Әдетте, оларда стандартты код шаблондарының жиынтығы бар

сіз жай ғана символ жазсаңыз ол сізге тегтер мен атрибуттар тізімін шығарып береді(тек сіз жазған символға байланысты).

o Ал, жалпы ыңғайлылық – сақтау, ашу, бірден көп файлдар ашу, жылдамырақ.

Егер сіз жасаған сайт оның дизайны мен мақсаты сізге кері әсер етсе, онда мен сізге кеңес беремін келесі нәрселерден аулақ болыңыз: фон мен қаріптің жарқын контрастын түстерін қолданыңыз. Маған сеніңіз, адам мұндай бетті оқуда оған ұнамағанда, ол күрт өзгереді

оған деген қызығушылықты жоғалтады. Бұл мәтіннің көлеміне де қатысты. Үлкен қолдануға болмайды, алайда тақырыптар, мазмұны сияқты, кішкентай әріптермен- жазбаңыз ол көзге әсер әтеді, кішігірім  қарапайым ережелерді сақтағаныңыз жөн…

40 comments

  3. hey there and thank you for your information – I have definitely
    picked up anything new from right here. I did
    however expertise a few technical issues using this site,
    as I experienced to reload the website lots of times previous
    to I could get it to load correctly. I had been wondering if your web hosting is OK?
    Not that I’m complaining, but slow loading instances times will often affect your
    placement in google and can damage your high-quality score if advertising and marketing with
    Adwords. Well I’m adding this RSS to my email and could look
    out for much more of your respective interesting content. Ensure that you update
    this again soon.. Escape room lista

    Жауап беру
Пікір үстеу

Э-пошта мекенжайыңыз жарияланбайды. Міндетті өрістер * таңбаланған

You May Also Like

Безостая-1 сортты күздік бидайға сипаттама

                                                                       Жоспары: Кіріспе Негізгі бөлім: Безостая-1 сортты күздік бидайға сипаттама; Пісу кезеңі;…

Жарақат және оның түрлері

Жарақат – әртүрлі сыртқы ортаның әсерінен организмнің ұлпалары мен ағзаларының морфологиялық, торшалық…

Көлік тасымалдары және оның тиімділігі

Су көлігі       Су көлігі – энергияны пайдалануы жағынан көліктің ең арзан түрі.…

Жаңғақ қосылған кекс

Жаңғақ қосылған кекс Қажетті өнімдер: 450 г ұн, 350 г құмшекер, 1…