Webszerkesztés
Notepad ++
Indíts el a Notepad++ webszerkesztő programot.Egészítsd ki a fájlt a hiányzó head nyitó és záró jelölőivel.
7. Szúrd be a pizza_02.jpg képet a kep_jobb osztályú elemen belülre.
Módosítsd a CSS szabályokat az alábbiak szerint:
17. feladatsor
Indíts el a Notepad++ webszerkesztő programot.
2. Nyisd meg az index.txt nevű fájlt a megadott helyről.
-
Egészítsd ki a fájlt a hiányzó head nyitó és záró jelölőivel.
Rendelj a fájlhoz a styles.css stíluslapfájlt.
<head> <meta charset="utf-8"> <link rel="stylesheet" href="styles.css"> <title>Pacman Pizza</title> </head>
3. Módosítsd az „Üdvözöljük a...” szöveggel kezdődő sort 1. szintű címsorrá, valamint az „Állásajánlat” sort 2. szintű címsorrá.
<p><h1>Üdvözöljük a Pacman Pizza oldalán!</p></h1>
<p><h2>Állásajánlat</p></h2>
4. Állíts be hiperhivatkozást a „pizzafélék” szóra, amely mutasson a Pizzák című oldalra.
<a href="pizzak.html">pizzafélék</a>
Állíts be hiperhivatkozást a „leggyorsabb futárokkal” szövegrészre is, ez mutasson a megrendeles.html oldalra.
<a href="megrendeles.html">leggyorsabb futárokkal</a>
Mentsd el a fájlt weboldalként index.html néven és zárd be.
-
Fájltípus: .html
-
Fájltípus: .html
-
5. Nyisd meg a tortenet.html fájlt.
-
Szúrj be sortörést „A pizzát Vergilius...” mondat elé.
használtak.<br /> A pizzát Vergilius
„A modern pizza feltalálását...” kezdetű mondattól a szöveg kerüljön új bekezdésbe.
specialitást.</p> <p>A modern pizza
6. Alakítsd félkövérré a „napjaink egyik legkedveltebb” szövegrészt.
<b>napjaink egyik legkedveltebb</b>
„Raffaele Espositónak” szövegrészt pedig tedd dőltté.
<i>Raffaele Espositónak</i>
7. Szúrd be a pizza_02.jpg képet a kep_jobb osztályú elemen belülre.
Adj a képnek alternatív szöveget „pizza” néven.
<p class="kep_jobb"><img src="pizza_02.jpg" alt="pizza"></p>
Mentsd el és zárd be a tortenet.html fájlt.
-
-
-
8. Nyisd meg a pizzak.html fájlt.
-
Szúrj be a táblázat elejére táblázat feliratot (caption) „Pizzáink ezen a héten” szöveggel.
<table> <caption>Pizzáink ezen a héten</caption>
9. Rendezd át a táblázat sorait úgy, hogy a pizzák elnevezéseik szerint ABC sorrendben legyenek egymás alatt.
Alexandra sor az elejére, Vegetáriánus sor a végére
Mentsd el és zárd be a pizzak.html fájlt.
-
-
-
10. Nyisd meg a megrendeles.html fájlt.
-
A méretre vonatkozó rádiógombok feliratait alakítsd címke (label) típusúvá.
<label for="meret_32">32 cm</label> <label for="meret_45">45 cm</label>
11. A telefonszámhoz tartozó beviteli mező paramétereit módosítsd úgy, hogy a neve tel legyen, a mezőben megadható maximális karakterszám pedig 15.
<input type="text" name="text""tel" maxlength="15">
Mentsd el és zárd be a megrendeles.html fájlt.
-
-
-
12. Nyisd meg a styles.css fájlt.
-
Módosítsd a CSS szabályokat az alábbiak szerint:
A content azonosítójú elem h1 gyermekelemeire a betű mérete legyen az alap betűméret 1,5-szerese és középre rendezett.
#content h1{
text-align: leftcenter;
font-size: 1.5em;
}13. A table elemek felső és alsó margóját állítsd 0 méretűre, a bal- és jobboldali margót pedig állítsd be úgy, hogy az elem középre rendeződjön.
table{
width: 500px;
border-collapse: collapse;
margin: 0 auto;
}14. A td elemeknek adj keretet, amely 1 pixel vastag, pontozott mintázatú és #c00000 színű.
td{
padding: 5px 10px;
border: 1px dotted #C00000;
}15. Rendelj a fieldset elemekhez egységesen 10 pixel bélés (padding) értéket, valamint az elem szélességét 500 pixelben határozd meg.
fieldset{
padding: 10px;
width: 500px;
}16. Az egysoros szöveges beviteli mező szélességét méretezd 300 pixel nagyságúra.
input[type='text']{
width: 300px;
}Ments és zárj be minden fájlt és zárj be minden alkalmazást.
-
-
-
-
-
Az elkészült weboldal:

