Informatika1-2014/Gyakorlat9

A MathWikiből
(Változatok közti eltérés)
(Új oldal, tartalma: „== CSS Feladatok == Fejezzük be a maradék CSS feladatokat: Készítsetek egy új file-t a public_html mappátokba style.css névvel, mellette nyissátok meg az inde…”)
 
 
(egy szerkesztő 7 közbeeső változata nincs mutatva)
20. sor: 20. sor:
 
== Latex bevezetés ==
 
== Latex bevezetés ==
  
 +
=== Első LaTeX-fájl ===
  
 +
* Másoljátok a következő kódot egy fájlba! A legjobb, ha újragépelitek, mert akkor jobban megjegyzitek (a %-os megjegyzéseket nem kell átmásolni)! Mentsétek el '''minta1.tex''' néven!
 +
 +
<latex>
 +
\documentclass{article}
 +
 +
\usepackage[T1]{fontenc}    % belső kódrendszer beállítása
 +
\usepackage[utf8]{inputenc}  % input kódolás
 +
\usepackage[magyar]{babel}  % nyelv
 +
\usepackage{lmodern}
 +
 +
\usepackage{amsmath,amssymb} % AMS matematikai és fontcsomag
 +
\usepackage{graphicx}        % képek beillesztéséhez
 +
 
 +
\title{}
 +
\author{}
 +
\date{}                      % ez maradhat üresen is, vagy kitölthető
 +
 +
\begin{document}
 +
 +
\maketitle
 +
 +
\tableofcontents
 +
 +
\section{}
 +
 +
\subsection{}
 +
 +
\end{document}
 +
</latex>
 +
 +
* Másoljátok át a '''minta1.tex''' állományt egy '''latex1.tex''' nevűbe, és ebben töltsétek ki az üres helyeket valamilyen szöveggel ([http://hu.lipsum.com/feed/html Lorem Ipsum], ha nincs jobb ötletetek), és fordítsátok le, majd nézzétek meg a következő parancsokkal (konsole-ból):
 +
 +
  pdflatex latex1
 +
  xpdf latex1.pdf &
 +
 +
=== TexMaker ===
 +
 +
* Használhattok fejlesztõi környezetet is a latex fájlok írásához (erõsen ajánlott). A [http://www.xm1math.net/texmaker/ TexMaker] egy platformfüggetlen fejlesztõi környezet, az intézeti gépeken is van. Ebben fordítani az F1 billentyûvel lehet.
 +
 +
* Ha eddig minden ment hiba nélkül, akkor tegyetek egy-két hibát a szövegbe, fordítsátok le, nézzétek meg a hibaüzenetet! (TexMaker alul írja pirossal.)
 +
 +
* Írjatok képleteket a szövegbe, használjátok az [http://www.math.bme.hu/~morap/informatika1-2009/latex/2ea.pdf innen letölthető] anyagot segítségnek.
 +
 +
* Az aktuális [http://www.math.bme.hu/~andaia/oldgyak/142ma1e.html Analízis 1 feladatokat] reprodukáljátok latexben.
  
 
== Hasznos linkek ==
 
== Hasznos linkek ==
  
* [http://validator.w3.org/ HTML validátor]
 
 
* [http://jigsaw.w3.org/css-validator/ CSS validátor]
 
* [http://jigsaw.w3.org/css-validator/ CSS validátor]
* [[Informatika1-2014/Gyakorlat7|7.gyakorlat]]
+
* [[Informatika1-2014/Gyakorlat8|8.gyakorlat]]
 
* [http://www.math.bme.hu/~wettl/okt/info1/2014/Info1_CSS_2014.pdf 8. előadás]
 
* [http://www.math.bme.hu/~wettl/okt/info1/2014/Info1_CSS_2014.pdf 8. előadás]
 
* [https://docs.google.com/open?id=0Bwk5mjaCfPlVeDdVTXZWbnBOdEk CSS3 Cheat Sheet]
 
* [https://docs.google.com/open?id=0Bwk5mjaCfPlVeDdVTXZWbnBOdEk CSS3 Cheat Sheet]
 
* [https://docs.google.com/open?id=0Bwk5mjaCfPlVaEVLZ0swU0xCU2M HTML5 Cheat Sheet]
 
* [https://docs.google.com/open?id=0Bwk5mjaCfPlVaEVLZ0swU0xCU2M HTML5 Cheat Sheet]
 
* [http://www.w3schools.com/ http://www.w3schools.com/]
 
* [http://www.w3schools.com/ http://www.w3schools.com/]

A lap jelenlegi, 2014. november 18., 15:02-kori változata

Tartalomjegyzék

CSS Feladatok

Fejezzük be a maradék CSS feladatokat:

Készítsetek egy új file-t a public_html mappátokba style.css névvel, mellette nyissátok meg az index.html-t is.

  1. Elõször csak inline írjunk CSS kódot az index.html-ünkbe, valahol változtassátok meg a betûk méretét ( style = "font-size:large" )
  2. Írjatok pár span-t az index.html-be, és adjátok õket valamilyen névvel hozzá egy osztályhoz. ( class = "kiemelt" )
  3. A style.css-t kapcsoljátok be az index.html-be és az orarend.html-be is. ( <link rel="stylesheet" href="style.css"> a head-be )
  4. A style.css segítségével érjétek el, hogy a 2. pontban definiált osztályba tartozó span-ek dõlt betûvel legyenek. (8. előadás)
  5. Most érjétek el, hogy az összes p-ben levõ szövegetek dõlt betûvel legyen.
  6. Mivel így már nem látszik mely szövegrészek voltak a kiemelt span-ben, így változtassátok meg, hogy a kiemeltek ne legyenek dõltek, legyenek félkövérek.
  7. Próbáljátok a szövegetek adott részeit máshova igazítani, pl a címet középre. Használjatok a címhez id-t, ne class-t. (8. előadás)
  8. Térjünk át az órarendre. Érjétek el, hogy jelentõs margója legyen a táblázatotok head (th) celláinak. Arra vigyázzatok, hogy ilyenkor a border="1"-et ki kell venni a html kódból. (8. előadás)
  9. Csináljatok szép keretet a táblázatnak, ne fekete legyen, próbáljátok meg hogy néz ki a dupla, esetleg ha vastagabb. (8. előadás)
  10. Térjünk vissza az index.html-re. Érjétek el, hogy ne a hagyományos módon legyen kiírva a listátok, mondjuk gyémántok legyenek a jelölõk, vagy római számok a számok. (8. előadás)
  11. Változtassátok meg a linkeket, pl ne legyenek aláhúzva, vagy más színnel legyenek. (pl: a:link {font-size:small;}, van még a:visited, a:hover, a:active)
  12. Éljétek ki magatokat, tegyétek olyanná az oldalt amilyenné szeretnétek.

Latex bevezetés

Első LaTeX-fájl

  • Másoljátok a következő kódot egy fájlba! A legjobb, ha újragépelitek, mert akkor jobban megjegyzitek (a %-os megjegyzéseket nem kell átmásolni)! Mentsétek el minta1.tex néven!
\documentclass{article}
 
\usepackage[T1]{fontenc}     % belső kódrendszer beállítása
\usepackage[utf8]{inputenc}  % input kódolás
\usepackage[magyar]{babel}   % nyelv
\usepackage{lmodern}
 
\usepackage{amsmath,amssymb} % AMS matematikai és fontcsomag
\usepackage{graphicx}        % képek beillesztéséhez
 
\title{}
\author{}
\date{}                      % ez maradhat üresen is, vagy kitölthető
 
\begin{document}
 
\maketitle
 
\tableofcontents
 
\section{}
 
\subsection{}
 
\end{document}
  • Másoljátok át a minta1.tex állományt egy latex1.tex nevűbe, és ebben töltsétek ki az üres helyeket valamilyen szöveggel (Lorem Ipsum, ha nincs jobb ötletetek), és fordítsátok le, majd nézzétek meg a következő parancsokkal (konsole-ból):
 pdflatex latex1
 xpdf latex1.pdf &

TexMaker

  • Használhattok fejlesztõi környezetet is a latex fájlok írásához (erõsen ajánlott). A TexMaker egy platformfüggetlen fejlesztõi környezet, az intézeti gépeken is van. Ebben fordítani az F1 billentyûvel lehet.
  • Ha eddig minden ment hiba nélkül, akkor tegyetek egy-két hibát a szövegbe, fordítsátok le, nézzétek meg a hibaüzenetet! (TexMaker alul írja pirossal.)
  • Írjatok képleteket a szövegbe, használjátok az innen letölthető anyagot segítségnek.

Hasznos linkek

Személyes eszközök