1 ICT IIA/IIB ICT IIA 3 1....................... 3.................. 3.................. 4 1................... 4 vs........ 4..................... 5 2....................... 5 1......... 5...... 6 2................... 6 3....................... 6..................... 6..................... 7 3................... 7........... 7 4....................... 8..................... 8....................... 8....................... 9.......... 9................. 10 4................... 10 PDF....... 11..................... 11 5....................... 11................. 11........... 12 5................... 13 (iso-iso2tex)............... 13..................... 13.......... 13..................... 13 6....................... 14........... 14................. 15................ 15.................. 15 6................... 15 7....................... 16.................. 16 twoside_master.tex........... 16 7................... 17........... 17..................... 17 8....................... 18.................. 18.............. 18 8................... 19 9....................... 19 2..................... 19..................... 19.................. 19...................... 20 9................... 20 10....................... 20.... 20........... 21.................... 21..... 21............. 22 10................... 22 11....................... 22 1
2 ICT IIA/IIB......................... 22....................... 23 11................... 24 PGF/TikZ................ 24..................... 25 pdfcrop................. 25..................... 25 12....................... 25 Org.............. 25 Beamer........ 26............ 26 12................... 26 13....................... 27 LuaTEX X TEX................ 27 E TEX........ 28 13................... 29 IPAmj.......... 29..................... 29 14....................... 30 HTML.................. 30 CSS................... 31 14................... 32 15....................... 33 Emacs HTML............ 33 Web.............. 33 15................... 34 ICT IIB 34 1....................... 34 HTML5... 34......... 35 SEO................. 35 1................... 35 2....................... 36.............. 36 b, i, em, strong, small, hr......... 36 2................... 36 3....................... 36 div span................. 36 Responsive Web Design............ 37 TEX Copyleft........... 38 3................... 38 4....................... 38...................... 38................. 39................. 39................ 39 4................... 40 5....................... 40......................... 40 5................... 41 6....................... 41 lang 41 nth-child..... 42 6................... 42 7....................... 42........... 42 Web............... 43........ 44 7................... 45 8....................... 45................. 45.............. 46 8................... 47 9....................... 47.................. 47 9................... 48 10....................... 48..................... 48 10................... 50 11....................... 50............. 50 Web FrakturMaguntia.... 52 Web Junicode........ 52 53 11................... 53 12....................... 53 Web Web 53 Web................ 54 12................... 54 13....................... 55 2
ICT IIA/IIB 3 JavaScript.................... 55 JavaScript............... 55 13................... 56 14....................... 57.. 57 Berlin, Paris, London.................. 58 14................... 59 15....................... 59 DOM.......... 59 DOM........ 60 15................... 60 60 Ajax....................... 60 jquery...................... 61 61 ICT IA/IB ICT IIA 1 TEX Upright, Italic, Small Caps 5 TEX X TEX LuaTEX TEX E Preamble 2 TEX UTF-8 LF \usepackage[t1]{fontenc} \usepackage[utf8]{inputenc} TEX Times, Palatino, Linux Libertine, Noto Preamble \usepackage{newtxtext} (Times) \usepackage{newpxtext} (Palatino) \usepackage[sb]{libertine} (Linux Libertine) \usepackage{noto} (Noto) Pan-Language Harmony Times/Palatino: Linux Libertine: Noto: Noto Noto X TEX LuaTEX Linux E Libertine sb (semibold) boldface Times/Palatino {newtxtext,newtxmath}/{newpxtext,newpxmath} Linux Libertine Noto 3
4 ICT IIA/IIB \textrm{serif} serif (default) \textsf{sans serif} sans serif \texttt{typewriter type} typewriter type upright \textmd{medium} medium (default) \textbf{boldface} Boldface \textup{upright} Upright (default) \textit{italic} Italic \textsc{small Caps} Small Caps 3 15 2.54 12 normalsize 10pt 11 12 \documentclass 11pt 12pt {\small...} \tiny, \scriptsize, \footnotesize, \small, \normalsize, \large, \Large, \LARGE, \huge, \Huge PC IPAex Windows Mac \textmc{} (default) \textgt{ } 1 font_uptex.tex 1. font_uptex.tex uplatex dvipdfmx 2. 3. 4. Times Palatino, Linux Libertine, Noto 5. Windows IPAex, Mac Windows MS Mac IPAex vs. Goethe Faust Schiller Wilhelm Tell Faust Zikade Platypleura kaempferi Graptopsaltria nigrofuscata Hyalessa maculaticollis Cryptotympana facialis Tanna japonensis Meimuna opalifera \textbf 2 \textit Goethe 4
ICT IIA/IIB 5 Faust Platypleura kaempferi \textbf \textit \textit \textbf \textit TEX \authorname, \worktitle, \binomen Preamble \textbf \textit \textsc Preamble logical_visual.tex 1. logical_visual.tex uplatex dvipdfmx 2. 3. Preamble 4. 5. Preamble main=ngerman main main=french 2 TEX tabular array tabular tabularx 1 longtable 1 1 Preamble \usepackage{tabularx} \begin{center} \begin{tabularx}{ }{} \end{tabularx} \end{center} tabularx center tabularx center flushright flushleft 10cm 10cm \textwidth 0.8\textwidth 0.8 l cr X r l c X 1 2 3 4 & \\ \hline \\ \hline 1 \multico- 5
6 ICT IIA/IIB lumn{}{}{ } r l c X \multicolumn{4}{ c }{\textbf } 4 texdoc tabularx texdoc longtable tabularx 1 longtable Preamble \usepackage{longtable} longtable \begin{center} \begin{longtable}[ ]{} \caption{ } \end{longtable} \end{center} tabularx flushleft/center/flushright longtable l/c/r l/c/r/p X p tabularx X p{0.5\textwidth} \caption[ ]{ } tabularx tabularx longtable 2 tabularx_sample.tex, longtable_sample.tex 1. tabularx_sample.tex uplatex dvipdfmx 2. 1 3. longtable_sample.tex uplatex dvipdfmx 4. 5. 6. CSV tabular Web TEX MS Excel CSV tabular tabular tabularx 3 longtable TEX tabularx TEX TEX 1 6
ICT IIA/IIB 7 TEX float figure table TEX Cross-Reference TEX 8 tabularx table \begin{table} \caption{ \label{tab:midashi}} tabularx \end{table} JIS X 4051 \caption \listoftables \caption[ ]{ } \label \caption \caption longtable longtable tabularx \label \caption \label graphicx Preamble \usepackage[dvipdfmx]{graphicx} dvipdfmx pdflatex pdftex LuaTEX X TEX luatex xetex E figure \begin{figure} \includegraphics[width=0.8\textwidth]{pi.jpg} \caption{ } \label{fig:midashi} \end{figure} *.pdf, *.png, *.jpg, *.eps \includegraphics pi.jpg 0.8 \includegraphics \fbox{...} frame TEX 2 minipage wrapfig mawarikomi 3 fig_tab.tex, 20160620_pubicornis.jpg 1. fig_tab.tex uplatex dvipdfmx 2. 3. \listoffigures \listoftables 4. TEX fig_tab.tex Preamble \dummytext[1] 1 7
8 ICT IIA/IIB 100 100 1 xcolor @ \makeatletter \makeatother longtable table table longtable Preamble TEX lipsum Lorem ipsum dolor sit amet blindtext graphicx xcolor texdoc lipsum texdoc blindtext texdoc graphicx texdoc xcolor 4 2.3 5 8 12 5 11 Cross-Reference TEX TEX \label \caption{ } \label{fig:this_pic} \caption{\label{tab:that_tab}} \section{ \label{sec:this}} \subsection{ \label{subsec:that}} \footnote{ \label{fn:some}} fig: tab: sec: subsec: fn: \ref \pageref \ref{sec:this} \pageref{sec:this} \label{subsec:that} \pageref{subsec:that} \ref{fig:this_pic} \pageref{fig:this_pic} \ref{tab:that_tab} \pageref{tab:that_tab} TEX \tableofcontents TEX \section \subsection 8
ICT IIA/IIB 9 babel polyglossia Inhaltsverzeichnis Table des matières Contents Tabelle/Table/Table Abbildung/Figure/Figure \section*{} \section*{} \addcontentsline{toc}{section}{} \addcontentsline toc2 subsection subsection section, subsection, subsubsection TEX 50 2 Preamble \usepackage{makeidx} \makeindex \end{document} \addcontentsline{toc}{section}{ } \printindex Snow White\index{Snow White} \index{ } \index{@} König\index{Koenig@König} \index{} \index{ } 52 \index{ @} file.tex 1. uplatex file 2. upmendex file 3. uplatex file 4. dvipdfmx file upmendex xindy \index{ @} Ärger\index{Ärger} file.tex 1. pdflatex file 2. texindy -L german-din file.idx 3. pdflatex file xindy -L english french german-din ä ae german-dudenduden ä a xindy texindy file.idx xindy upmendex 9
10 ICT IIA/IIB texdoc xindy texdoc texindy texdoc upmendex HTML (Hyper- Text Markup Language) Web hyperref TEX TEX hyperref Preamble \usepackage[dvipdfmx]{hyperref} pdftex xetex LuaTEX pdftex,unicode=true hyperref Preamble hyperref \href \url \href{http://apapa.hum.fukuoka-u.ac.jp/}{apapa } \url{http://apapa.hum.fukuoka-u.ac.jp/} 2 Apapa TEX \href, \url \hypersetup PDF bookmarks TEX pxjahyper hyperref LuaTEX X TEX pxjahyper E PDF \usepackage[dvipdfmx]{hyperref} \usepackage{pxjahyper}% PDF \hypersetup{% bookmarksnumbered=true, colorlinks=false, setpagesize=false, pdftitle={ }, pdfauthor={ }, pdfsubject={}, pdfkeywords={ }} bookmarksnumbered colorlinks false setpagesize pdftitle pdfauthor pdfsubject pdfkeywords hyperref \printindex \clearpage \phantomsection \clearpage% \phantomsection% hyperref \addcontentsline{toc}{section}{ } \printindex 4 cr_ind.tex, cr_ind_hyp.tex, sneewittchen.jpg 1. cr_ind.tex cr_ind_hyp.tex hyperref 2. cr_ind.tex uplatex, upmendex, uplatex dvipdfmx 3. TEX PDF 4. cr_ind_hyp.tex 10
ICT IIA/IIB 11 PDF dvipdfmx PDF dvipdfmx -S -P 0x0804 -K 128 file S P K PDF Owner password User password Re-enter owner password dvipdfmx Encryption Support texdoc dvipdfmx pdflatex PDF pdflatex PDFtk TEX Adobe Acrobat pdftk orig.pdf output new.pdf owner_pw hoge user_pw hage allow Printing orig.pdf dvipdfmx new.pdf cr_ind_hyp.tex 1. cr_ind_hyp.tex uplatex, upmendex, uplatex dvipdfmx 2. dvipdfmx -S -P 0x0804 -K 128 3. PDF 5 cr_ind[_hyp].tex TEX TEX TEX cr_ind[_hyp].tex \begin{thebibliography}{9} \addcontentsline{toc}{section}{ } \bibitem{ } \bibitem{anykey} Familyname, F.: \textit{booktitle}. Publisher. Address, Year. \end{thebibliography} thebibliography 9 9, 99, 999,... 8 9 14 99 TEX 1, 42, 365,... \addcontentsline anykey ~\cite{khm_ja} p.130... die Königin\footnote{Grimm~\cite{khm_de} p.269.}. 11
12 ICT IIA/IIB \cite TEX \cite ~\cite \cite ~ ~ TEX upbibtex BIBTEX *.bib EURO ICT Emacs *.bib major mode BibTeX bibtex-mode Emacs C-h f Describe function: bibtex-mode upbibtex Brüder, Frères Br{\"u}der, Fr{\`e}res BIBTEX @book{, author = "", title = " ", publisher = "", address = "", year = "", } @article{, author = "", yomi = "", title = " ", journal = " ", number = " ", year = "", month = "", pages = " ", } Familyname, Firstname @book address author @article yomi, number, month, pages yomi yomi upbibtex TEX \nocite{*} \bibliographystyle{jplain} \phantomsection% hyperref \addcontentsline{toc}{section}{ } \bibliography{} \bibliography khm.bib khm \bibliographystyle jplain plain \phantomsection \addcontentsline \bibliography{khm1,khm2,khm3} \cite{ } 12
ICT IIA/IIB 13 \cite \nocite{*} \cite TEX file.tex 1. uplatex file 2. upbibtex file 3. upmendex file 4. uplatex file 5. dvipdfmx file 50 5 cr_ind_hyp_bib.tex, khm.bib 1. cr_ind_hyp_bib.tex khm.bib 2. cr_ind_hyp_bib.tex uplatex, upbibtex, upmendex, uplatexdvipdfmx 3. TEX PDF 4. (iso-iso2tex) upbibtex Br{\"u}der, Fr{\`e}res TEX Emacs (iso-iso2tex) M-x (iso-tex2iso) eu_bib.tex, khm_eu.bib 1. khm_eu.bib TEX khm_eu2.bib 2. eu_bib.tex pdflatex, bibtex, texindy -L germanduden *.idx, pdflatex 3. 50 cr_ind_hyp_bib.tex Brothers Grimm, Brüder Grimm, Frères Grimm *.bib @preamble{"\newcommand{\noop}[1]{}"} \noop{grimm3}grimm, Br{\"u}der \noop{grimm1}grimm, Fr{\`e}res \noop{grimm2}grimm, Brothers grimm1/2/3 cr_ind_hyp_bib_sort.tex, khm2.bib 1. khm2.bib 2. cr_ind_hyp_bib_sort.tex uplatex, upbibtex, upmendex, uplatexdvipdfmx 3. 13
14 ICT IIA/IIB 6 EURO ICT Emacs *.tex major mode AUCTEX Aalborg University Center mode line LaTeX/MPS M: Math., P: PDF, S: [Correlate Input/Output] Search AUCTEX TEX Emacs TEX Syntax Highlighting AUCTEX EURO ICT Emacs C-h i m AUCTeX *.tex EURO ICT Emacs mode line LaTeX/MPS Ref EURO ICT Emacs TEX RefTEX RefTEX TEX Emacs minor mode AUCTEX RefTEX C-h i m RefTeX RefTEX TEX ICT IB 6 Org major mode Org TEX AUCTEX RefTEX EURO ICT Emacs TEX TEX C-c = (reftex-toc) frame window TABLE-OF-CONTENTS window buffer buffer n: [n]ext p: [p]revious TAB: TEX RET: buffer SPC: q: buffer [q]uit r: TEX [r]escan f: TEX [f]ollow toggle l: [l]abel toggle i: [i]ndex toggle C-c C-n: section C-c C-p: section <: >:?: buffer buffer region Org RefTEX buffer EURO ICT Emacs TEX buffer Outline minor mode cursor C-c @ C-^ (outline-move-subtree-up) C-c @ C-v (outline-move-subtree-down) 14
ICT IIA/IIB 15 RefTEX TEX cursor label C-c ( (reftex-label) label C-c ) (reftex-reference) C-c ( section Label: sec: table figure Label: tab: Label: fig: minibuffer : RefTEX C-c ) SELECT A REFERENCE FORMAT Emacs [^M] (\ref) [p] (\pageref) ^M C-m SELECT A LABEL TYPE: [ ] SPC buffer SPC [t]able, [f]igure, [n]footnote, [s]ection buffer n/p/<up>/<down> RET buffer q RefTEX C-c ) ~\ref \ref/\pageref ~ ~ buffer buffer n/p/<up>/<down> q \cite ~\ref ~ ~\cite cursor space region cursor C-c / (reftex-index-selection-or-word) \index \index C-c < (reftex-index) *.rip C-c \ (reftex-index-phrase-selection-or-word) TEX buffer C-c > (reftex-display-index) buffer buffer e [e]dit minibuffer minibuffer RET buffer EDITED [r]escan C-c [ (reftex-citation) C-c [ Regex { && Regex...}: [... ] minibuffer 6 cr_ind_hyp_bib.tex, khm.bib 1. TEX buffer 2. buffer 3. C-c (, C-c ), C-c [, C-c / 15
16 ICT IIA/IIB 7 EURO ICT Emacs & TEX TEX 1 25 1 32 1 800 TEX twoside_master.tex jsbook_lglf.cls jsbook.cls twoside_master.tex TEX twoside_master.tex \documentclass[...,titlepage]{jsbook_lglf}% % % Preamble \title{...}% \author{...}% \date{\today}% \usepackage{makeidx}% \makeindex% \begin{document} \maketitle% \frontmatter% \tableofcontents% \listoftables% \listoffigures% \chapter{ }% \mainmatter% \chapter{...}% \section{...}% \bibliographystyle{jplain}% \bibliography{...}% \backmatter% \printindex% \end{document} twoside_master.tex \frontmatter chapter \let\clear[double]page\relax \frontmatter \chapter{ } \frontmatter \mainmatter \chapter \section \subsection \mainmatter \chapter*{...} \addcontentsline \mainmatter \footnote{} a pen\footnote{this is a footnote.}. \footnote space 16
ICT IIA/IIB 17 quote 1 quotation \small quote/quotation babel \selectlanguage Scope \selectlanguage \enquote{...} Deutsch «Français» English verse \\ TEX itemize enumerate \addcontentsline \backmatter 7 twoside_master.tex, khm.bib, jsbook_lglf.cls, sneewittchen.jpg, sw_leg.jpg 1. TEX uplatex, upbibtex, upmendex, uplatexdvipdfmx 2. PDF Acrobat Reader 3. Acrobat Reader M-v p p 4. 5. twoside_master.tex hyperref twoside_master_hyp.tex 6. 7. Acrobat Reader Ctrl + D Windows Command + D Mac PDF \input \include 1 *.tex Preamble \documentclass[a4paper]{article} % Preamble \begin{document} \input{file1} \input{file2} \input{file3}... \end{document} *.tex \input \section Emacs C-x C-t IA 3 12 input include \include Preamble \includeonly{file1,file3} file1.tex file3.tex snee3_div.tex, sw_en.tex, sw_de.tex, sw_fr.tex 1. snee3_div.tex sw_en/de/fr.tex 2. snee3_div.tex pdflatex 17
18 ICT IIA/IIB 3. 4. \input \include 8 Ideographic Variation 3 U+9592 U+845b U+8fbb U+53f1 U+6c38 U+5584 16 A PC B PC U+9dd7U+9d0e... Adobe-Japan1 2018 4 Adobe-Japan1-6 Adobe- Japan1-6 Pr6N Pr6N Pr6N Adobe-Japan1-6 23,058 Mac Adobe-Japan1-6 Adobe-Japan1-6 Noto Noto Serif/Sans CJK JP OpenType PostScript Type 1 TrueType TEX Adobe-Japan1-6 otf OpenType Font Preamble \usepackage[...]{otf} expert OpenType deluxe 7 multi jis2004 jis2004 Adobe-Japan1 CID Character IDentifier \CID{13706} The Adobe-Japan1 CID The Adobe- Japan1-6 Character Collection CID PDF otf \CID{...} \UTF{4 16 } f e s Königsstraße vs. Konigsftraße e KŹnigŊĆraȷe K Ź n i g Ŋ Ć r a ȷ e ch ck st tz sz=ß Ě Ę Ć Ń ȷ f 18
ICT IIA/IIB 19 s TEX " TEX e Preamble \uml{a} a e A e Ae A e & obsolete e TEX LuaTEX X TEX ICT IIA 13 27 E 2 1 2 \documentclass twocolumn 1 1 2 table figure table* figure* * 1 table longtable multicol 2 3 multicol Preamble \usepackage{multicol} 8 iv.tex 1. TEX uplatex, dvipdfmx 2. iv.tex iv.pdf 3. Preamble otf jis2004 iv2.tex 4. iv.pdf iv2.pdf 5. {\usefont{encoding}{family}{series}{shape}...} 9 multicols \begin{multicols}{2} \end{multicols} 2 2 3 3 10 figure, table, longtable multicols 1 multicols 1 3 TEX Preamble TEX \baselineskip 1.2 19
20 ICT IIA/IIB \linespread{} 1.2 1.25 One-and-a-half-spacing 1.67 Double-spacing 3 4 setspace \usepackage{setspace} Preamble Preamble \onehalfspacing \doublespacing \setstretch{3} 3 \baselineskip setspace spacing singlespacing, onehalfspacing, doublespacing \maketitle \tableofcontents singlespacing lineno Preamble \usepackage[ ]{lineno} \begin{linenumbers}... \end{linenumbers} modulo 5 \modulolinenumbers[] pagewise 1 right leftswitch texdoc multicol texdoc lineno 9 cr_ind_hyp_bib_2col.tex, cr_ind_ hyp_bib_multicol.tex, snee3_linespread.tex, snee3_set space.tex, snee3_lineno.tex 1. cr_ind_hyp_bib_2col.tex uplatex, upbibtex, upmendex, uplatexdvipdfmx 2. 3. cr_ind_hyp_bib_multicol.tex uplatex, upbibtex, upmendex, uplatexdvipdfmx 4. 5. snee3_linespread.tex pdflatex 6. 7. \linespread 8. \documentclass twocolumn 9. snee3_setspace.tex pdflatex 10. 11. 12. snee3_lineno.tex pdflatex 13. 14. \modulolinenumbers 15. twocolumn 16. \linespread \columnsep 2 \columnseprule 10 soul Spacing out Underli- 20
ICT IIA/IIB 21 ning Overstriking xcolor Highlighting Preamble \usepackage{soulutf8} \usepackage[svgnames]{xcolor} \setulcolor{lime} \setstcolor{orangered} \sethlcolor{lavenderblush} xcolor svgnames SVG: Scalable Vector Graphics dvipsnames x11names blue, green, yellow, red, cyan, magenta \ul{...} \so{...} \st{...} \hl{...} \textcolor{}{...} framed Preamble \usepackage{framed} \colorlet{shadecolor}{} xcolor svgnames LightCyan oframed (open framed), shaded, leftbar Initail, Drop Cap Initiale Lettrine Preamble \usepackage{lettrine} \renewcommand{\lettrinetextfont}{\upshape} 2 Small Caps lettrine lettrine \lettrine[ ]{V}{or} V or lettrine 2 lines loversize slope lhang findent nindent lraise TEX lettrine.tex 800 1200 cmin: Carolingian Minuscule {\usefont{t1}{cmin}{m}{n}...} 21
22 ICT IIA/IIB 1 T1 2 cmin 3 m: medium 4 n: normal cmin 12pt 18pt 42 B42 ntgoth Breitkopf Fraktur ntfrakv, ntswabv, yinitas C.P.E. ntfrakv ntswabv s f s s s " e e ntfrakv ntfrak ntswabv ntswab βουστροϕηδόν TEX 19 \usepackage{boustrophedon} Preamble boustrophedon rongorongo boustrophedon boustrophedon_color boustrophedon texdoc soul texdoc soulutf8 texdoc xcolor texdoc framed texdoc lettrine texdoc lettrine-doc 10 snee3_soul.tex, lettrine.tex, bou.tex 1. snee3_soul.tex pdflatex 2. 3. lettrine.tex pdflatex 4. 5. lettrine.tex ntfrakv, ntswabv ntfrak, ntswab 6. bou.tex uplatex, dvipdfmx 7. 11 TEX verse \\ verse verse Preamble \usepackage{verse} \attrib Preamble \newcommand{\attrib}[1]{% \nopagebreak{\raggedleft\footnotesize #1\par}} 22
ICT IIA/IIB 23 \poemtitle{der Zauberlehrling} 2 altverse \settowidth{\versewidth}{hat der alte Hexenmeister} \begin{verse}[\versewidth] Nänie \poemlines{5} \flagverse Hat der alte Hexenmeister \\ Sich doch einmal wegbegen! \\... Tu ich Wunder auch. \\! \indentpattern{111111} altverse patverse \begin{patverse} \vin Walle! walle \\ Manche Strecke, \\... Zu dem Bade sich ergieße. \\! \end{patverse}... reledmac reledpar \end{verse} \attrib{johann Wolfgang Goethe, 1797} reledmac \poemtitle \settowidth 2 1 TEX verse patverse 2 1 \indentpattern 2 6 \vin verse indent 1 patverse 1 \vin \poemlines \\ \\! 1... Die Myrte still und hoch der Lorbeer steht, \\ Kennst du es wohl? \\>[6em] Dahin! Dahin \\... \\> [ ] 6em M 6 20mm TEX EDition MACro LATEX Extended Renewed reledpar PARallel typesetting reledmac/reledpar apparatus criticus reledmac/reledpar Preamble \usepackage{reledmac} \usepackage{reledpar} 0.45 Preamble \setlength{\lcolwidth}{0.46\textwidth} \setlength{\rcolwidth}{0.46\textwidth} \begin{pairs} \begin{leftside} \begin{otherlanguage}{french} \beginnumbering \pstart 23
24 ICT IIA/IIB... \pend \endnumbering \end{otherlanguage} \end{leftside} \begin{rightside} \begin{otherlanguage}{ngerman} \beginnumbering \pstart... \pend \endnumbering \end{otherlanguage} \end{rightside} \end{pairs} \Columns pairs Leftside Rightside babel otherlanguage \pstart \pend p paragraph \beginnumbering \endnumbering 5 R right \linenumberstyler{roman} \setrlineflag{} \eledsection * pairs \Columns 2 texdoc verse texdoc reledmac texdoc reledpar 11 verse.tex, para.tex 1. verse.tex pdflatex 2. Mignon 3. verse.tex twocolumn 4 4. 5. para.tex pdflatex PGF/TikZ PGF Portable Graphics Format TikZ TikZ ist kein Zeichenprogramm TEX PGF TikZ PGF Beamer TikZ \usepackage{tikz} \usetikzlibrary{decorations.text} Preamble \usetikzlibrary \begin{tikzpicture} \draw... ; \path... ;... \end{tikzpicture} tikzpicture ; TikZ 1200 TikZ TEX 24
ICT IIA/IIB 25 1772 12 18 Beamer PDF texdoc tikz texdoc visualtikz sinus1.tex, sinus2.tex, rect_spiral.tex, escher-brick-penrose-triangle.tex, tower-of-hanoi.tex 1. sinus1.tex, sinus2.tex pdflatex 2. rect_spiral.tex lualatex 3. escher-brick-penrose-triangle.tex, tower-ofhanoi.tex pdflatex pdfcrop TikZ TEX file.pdf pdfcrop file.pdf filecrop.pdf sinus1.pdf, sinus2.pdf, rect_ spiral.pdf, cr_ind_hyp_bib_tikz.tex 1. sinus1.pdf, sinus2.pdf, rect_spiral.pdf pdfcrop 2. cr_ind_hyp_bib_tikz.tex uplatex, upbibtex, upmendex, uplatexdvipdfmx 3. $ marvosym ƒ TEX The Comprehensive LATEX Symbol List texdoc comprehensive 12 Beamer Beamer projector TEX PDF Beamer TEX Org beamer0.txt EURO ICT Emacs org major mode Emacs beamer0.txt org PDF ICT IB 6 * 1 ** 2 1. 2.... * 1 ** 2 - -... ICT IB 11 org TEX HTML EURO ICT Emacs beamer 25
26 ICT IIA/IIB PDF (org-beamer-mode) C-c C-e l P (org-beamer-export-to-pdf) toggle ( ) Emacs M-x PDF Adobe Acrobat Reader C-l Beamer beamer0.txt PDF PDF TEX PDF TEX 1 frame beamer TEX \section{...} \subsection{...} \begin{frame}\frametitle{...}... \end{frame} frame 1 1 itemize enumerate \begin{itemize} \item<1>... \item<2>...... \end{itemize} < > 1 1 2 <1-> 1 <2,4> 2 4 block/exampleblock \setbeamercovered{transparent} \transdissolve[duration=2] PDF Beamer Bergen, Berlin, Copenhagen, Hannover,... \usetheme{warsaw} PDF pdfpages 1 allslides.tex A4 2 1 4 \includepdf PDF pages={1-3,4,7,12} 1-3 pages=- texdoc beamer texdoc pdfpages 12 beamer0.txt, beamer1.tex, beamer2.tex, allslides.tex 1. beamer0.txt EURO ICT Emacs M-x org- 26
ICT IIA/IIB 27 beamer-mode 2. C-c C-e l O 3. beamer0.txt beamer0.pdf 4. beamer1.tex uplatexdvipdfmx 5. beamer2.tex uplatexdvipdfmx 6. allslides.tex pdflatex 13 LuaTEX X TEX E TEX LuaTEX X TEX TEX TFM: TEX Font Metric Windows Mac, Linux OS OpenType TEX BIBTEX MakeIndex TEX LuaTEX X TEX LuaTEX X TEX E E E 1 TEX 5 13 LuaTEX lua_cr_ind_hyp_bib.tex uptex jsarticle ltjsarticle dvipdfmx fontenc, inputenc fontspec Noto otf luatexja-otf pxbabel babel japanese okumacro bxokumacro plext lltjext \ltjdefcharrange LuaTEX-ja \ltjsetparameter pxjahyper PDF zw Zenkaku Width zh Zenkaku Height \zw \zh \selectlanguage figure table babel uptex pxbabel japanese \selectlanguage pxbabel LuaTEX \selectlanguage Table, Abblidung \selectlanguage \selectlanguage japanese LuaTEX X TEX babel \begin{otherlanguage}{ngerman}% french... E 27
28 ICT IIA/IIB \end{otherlanguage} otherlanguage \foreignlanguage{french}{} X TEX 1 E xet_iv_uml.tex Preamble \documentclass[xelatex]{bxjsarticle} \usepackage{zxjatype} \setcjkmainfont{noto Serif CJK JP} \setcjksansfont{noto Sans CJK JP} \usepackage[ngerman]{babel} \usepackage{fontspec,xspace} \usepackage{noto}... xelatex bxjsarticle zxjatype Noto Serif CJK JP Noto Sans CJK JP OS noto Noto fontspec babel uptex xet_iv_uml.tex otf Emacs IVS Ideographic Variation Sequence: LuaTEX X TEX E Emacs C-x 8 RET 845b C-x 8 RET e0100 845b e0100 e0101 IVS Noto CJK JP Adobe-Japan1-6 23,058 Adobe-Japan1-6 Moji_Joho IPAmj 58,862 IVD_Charts_Adobe-Japan1.pdf IVD_Charts_Moji_Joho.pdf LuaTEX X TEX OpenType TEX TFM xet_iv_uml.tex fontspec \newfontfamily X TEX \frakturls E E LetterSpace=20 ch, ck, tz, st f C-x 8 RET 017f e C-x 8 RET 364 Emacs texdoc luatexja-ja texdoc xetex texdoc bxjscls-manual texdoc zxjatype texdoc fontspec TEX EURO ICT TEX TeX Live TEX LG/LF TeX Live 28
ICT IIA/IIB 29 tlmgr update --self --all 3 6 TeX Live TeX Live 2017 is frozen forever and will no longer be updated. This happens in preparation for a new release. skipping forcibly removed package package-name tlmgr install --reinstall package-name tlmgr tlmgr --help 13 lua_cr_ind_hyp_bib.tex, xet_iv_uml.tex 1. lua_cr_ind_hyp_bib.tex lualatex, upbibtex, upmendex, lualatex 2. xet_iv_uml.tex xelatex 3. Ligature TEX IPAmj ipamjm IPAmj ipamjm TEX Live TEX IPAmj IPAmj ipamjm TEX ipamjm IVD_Charts_Moji_Joho.pdf \MJMZM{MJ } Preamble ipamjm.tex PDF IVD_Charts_Adobe-Japan1.pdf IVD_Charts_ Moji_Joho.pdf 1 2 IPAmj Emacs C-x 8 RET IVS LuaTEX X TEX E Preamble lua_ipamjm.tex lua_ipamjm.tex luatexjafontspec fontspec \setmainfont IPAmj IPAmj Adobe-Japan1-6 18 Adobe-Japan1-6 Moji_Joho IPAmj IPA: Informationtechnology Promotion Agency ipamjm.tex, ipamjm.pdf, lua_ipamjm.tex, lua_ipamjm.pdf 1. ipamjm.tex uplatex, dvipdfmx 2. lua_ipamjm.tex lualatex 29
30 ICT IIA/IIB 14 HTML CSS HTML HyperText Markup Language 1 TEX tag *.html HTML Google Chrome, Mozilla Firefox, Internet Explorer, Microsoft Edge, Safari Web Web Web HTML <p> </p> p: paragraph / <br /> br: break element CSS Cascading Style Sheets Web HTML CSS HTML Web HTML Web HTML CSS CSS Web CSS cascade HTML/CSS HTML CSS HTML/CSS HTML/CSS HTML/CSS HTML5 CSS3 HTML HTML *.html <!DOCTYPE html> <html lang="ja"> <head> <title>...</title> <meta charset="utf-8">... </head> <body> <h1>...</h1> <p>...</p>... </body> </html> HTML5 DOCTYPE html html lang attribute ja value Web title meta head Web meta Web UTF-8 body Web h1 heading h2 h6 p paragraph first.html dl definition list dt definition term b boldface a anchor dd definition description ul unorderd list li list hr horizontal rule q quotation img image span, i italic div division address, br break 30
ICT IIA/IIB 31 HTML Web a name TEX \label href hyper reference # img src source./jpg/sw_leg.jpg. dot/ sw_leg.jpg HTML jpg.. 1../../abc.png 2 abc.png alt alternate img align right left width width height style html CSS ; margin: 0px 0px 0px 10px; q blockquote q span lang span Microsoft Edge Internet Explorer fr «Français» Emacs *.html major mode HTML HTML CSS first.html 6 link HTML <!- - - -> Emacs C-x C-; first.html HTML CSS link href lglf_base.css lglf_base.css Emacs *.css mode line CSS major mode CSS body { background-color: whitesmoke; margin-left: 3%; margin-right: 3%; font-family: "DejaVu Sans",..., ; } body selecorelement selector class selector, id selector, descendant selector background-color property : value ; property: value; 1 declaration{ } declaration block rule-set body Web whitesmoke Web 3% DejaVu Sans 31
32 ICT IIA/IIB Arial, Consolas, sans-serif lglf_base.css class selector pseudo-class selector HTML class.red-emph { color: red; } p:lang(ja) { text-indent: 1em; }. red-emph color red CSS HTML <q class="redemph">...</q> red-emph q.red-emph p.red-emph p class : link, visited, hover, focus, lang, first-child p:lang(ja) 1 1em h1, h2, h3, h4 font-size xx-large 2 medium=1 x-large 3/2 large 6/5 medium xx-large text-align center left, right, justify justify text-justify: distribute-all-lines; line-height complementary color midnightblue CSS 16 #e6e68f; CSS /* */ Emacs C-x C-; 1 // 14 first.html, css.zip, jpg.zip, png.zip 1. first.html css.zip, jpg.zip, png.zip 2. first.html 3. first.html first.html EURO ICT Emacs 4. first.html 6 C-x C-; C-x C-s 5. first.html 6. 7. lglf_base.css p lang #ffcc00; 8. #0050a4; 9. first.html Sneewittchen (Schneeweißchen) Blancheneige red red-emph 32
ICT IIA/IIB 33 15 Emacs HTML EURO ICT Emacs HTML Key Bindings HTML C-c <right> (sgml-skip-tagforward) C-c <left> (sgml-skip-tagbackward) C-c C-d (sgml-delete-tag) h1 C-c 1 (html-heading-1) p C-c RET (html-paragraph) C-c / (sgml-close-tag) C-c C-c h (html-hrefanchor) C-c C-c n (html-name-anchor) C-c C-a (sgml-attribute) C-c C-c u (htmlunordered-list) C-c C-c o (html-orderedlist) C-c C-c i (html-image) C-c C-t (sgml-tag) C-c C-s (html-autoview-mode) ä C-x 8 " a à C-x 8 ` a C-x 8 C-x 8 C-h HTML/CSS C-h m (describe-mode) Cursor h1 1 2, 3, 4, 5, 6 p URL Cursor > C-c C-s toggle *.html C-x C-s OS Web C-x 8 C-x 8 C-h buffer buffer active q *.html *.css C-h m HTML CSS CSS Key Bindings EURO ICT Emacs HTML/CSS minor mode rainbow 16 address Web Web Character Entity Reference 16 Numeric Character Reference HTML utf-8 Web Web 1. PC PC HTML/CSS 2. 3. Web PC H:\public_html Win- 33
34 ICT IIA/IIB dows ~/public_html Mac Web Web USER S GUIDE: FUTURE 5 5 https://www.cis.fukuoka-u.ac.jp/~/ URL Uniform Resource Locator 24 ~ ~ UNIX OS first.html https://www.cis.fukuoka-u.ac.jp/~ /first.html URL index.html ~index.html EURO ICT Emacs *.html 400 Last modified:, Updated:, Aktualisiert:, : case sensitive C-x C-s 2018-04-06 15:30:25 [JST: UTC+9] init.el,.emacs.el 15 first.html, css.zip, jpg.zip, png.zip 1. Web 2. first.html Web 3. first.html Web ICT IIB 1 ICT euro_ict2b.zip PC PC index.html Web ICT IIB Web Web ICT IIB Web Web ICT IIA 14 30 Web HTML/CSS ICT IIB HTML/CSS JavaScript HTML5 ICT IIB HTML *.html html lang <html lang="ja"> ja HTML de, fr, en ISO (International Organization for Standardization) 639 2 ISO639 lang lang lang html Root Element lang ja 34
ICT IIA/IIB 35 1 HTML lang body 1 h[1 6], p, pre, blockquote, ul, ol, dl, table, form, hr, address, div Web a, b, br, em i, img, q, sub, sup, tr, span ICT IIB HTML p, table, caption tr, span lang HTML Web <meta charset="utf-8"> HTML head meta charset HTML utf-8 utf-8 shift_jis, euc-jp, iso-2022-jp meta charset shift_jis Character Entity Reference Numeric Character Reference tables.html HTML < > & ä á â ç ß ASCII (American Standard Code for Information Interchange) shift_jis, euc-jp, iso-2022-jp Ä Ä Ä Ä c4 16 Ä Unicode Code Point Ä Emacs Cursor C-u C-x = SEO meta name content HTML index.html name="keywords" HTML content, name="description" HTML content name="author" HTML meta Web Web SEO: Search Engine Optimization Web SEO Web SEO 1 euro_ict2b.zip 1. 35
36 ICT IIA/IIB index.html Web 2. *.html Emacs lang C-s lang= 3. tables.html 4. test.html Emacs head meta charset shift_jis test.html Shift_Jis C-x RET f sjis RET 5. *.html meta author content Emacs grep find-name-dired Web 2../../ b, i, em, strong, small, hr <b>k</b>äfer, K<i>ä</i>fer Käfer, Käfer b Bold i Italic em Emphasis strong em strong small hr Horizontal Rule <hr /> *html small 2 2 Absolute Path Relative Path HTML HTML Web http[s]:// URL... 1 ICT IIA 14 31 index.html href./multilang.html./css/all.css multilang.html index.html all.css index.html css css 2 euro_ict2b.zip 1. *.html href Emacs occur multi-occur 2. index.html b, i strong, em index2.html 3. index.html index2.html 3 div span CSS HTML div document Division; span Span of content; index.html Emacs C-s div I-search <div style="overflow: auto;"> style CSS property: value; HTML CSS div C-c <right> div 36
ICT IIA/IIB 37 C-c <left> div div index.html div Nesting div class left, main, right div, main, aside Responsive Web Design span class tex fine, copyleft 3 Responsive Web Design Responsive Web Design RWD PC Web Web Web Content is like water Web RWD Web Google RWD Web 2015 Armageddon Mobilegeddon index.html RWD style div class left, main, right 3 overflow auto padding, border, margin Web visible scroll RWD head meta name viewport CSS viewport content width=device-width, initial-scale=1.0 class left, main, right head link href responsive.css responsive.css.left background-color, float, width, text-align, padding left class 20% 10.left a Descendant Selector left a 8 5 left 100% :hover main right float left float left float left, main, right index.html left, main, right @media @media Media Query screen 37
38 ICT IIA/IIB 620 max-width: 620pxand only 620 left, main, right width 100% left, main, right Break Point TEX Copyleft Emacs responsive.css I-search.tex TEX frame C-x 2 2 window index.html TEX E TeX resonsive.css.tex sub HTML tex sub uppercase sub 5ex 0.1667em 0.125em CSS HTML index.html <sub>e</sub> e E Kerning sub/sup SubscriptSuperscript responsive.css HTML head link rel stylesheet CSS CSS ex, em x 1 Copyleft*1 transform scalex() X 1 Y Z 1 copyleft Vendor Prefix -moz: Mozilla Firefox; -o: Opera; -webkit: Google Chrome, Safari, -ms: Microsoft Internet Explorer Vendor Prefix Vendor Prefix Double Punctuation!? : ; Space HTML Non-Breaking SPace responsive.css fine 0.125em span class fine 3 euro_ict2b.zip 1. fine 2. HTML 3. responsive.css HTML LATEX X TEX LATIN CAPITAL LETTER REVERSED E: Ǝ 4 tables.html HTML E E *1 Copyright 38
ICT IIA/IIB 39 ol Ordered List ul Unorderd List dl Definition List 3 ol <ol> <li>...</li> <li>...</li> <li>...</li> </ol> li List Item 1 style CSS liststyle-type decimal-leading-zero 01, 02, 03,... upper-roman I, II, III,... lowerlatin a, b, c,... lower-greek α, β, ς,... hiragana... hiraganairoha... katakana... cjk-ideographic... 1 start CSS responsive.css.ol_var.ol_var li ol_var 1.2 0.5em 0CSS HTML ul ol ol ul Discstyle CSS list-styletype circle, square, none responsive.css.ul_var.ul_var li ul_var 3px #fffaf1; 1.5 0.5em ::before Emoji ::before ::after 5em CSS ::before content & HTML CSS \a0 HTML 16 & \ # x ; Emacs CSS tables.html h2, h3 1. 1-1. HTML num h[1 4] CSS responsive.css header.num, h2.num, h3.hum Chapter Section Subsection couterreset chapter, section, subsection h ::before counterincrement chapter, section, subsection h2, h3, h4 chapter, section, subsection 1 39
40 ICT IIA/IIB content counter(chapter) 1. 1-1. content CSS ".\a0" " content \a0 4 euro_ict2b.zip 1. ol style list-style-type decimal-leading-zero, upper-roman, lowerlatin, lower-greek, hiragana, hiragana-iroha, katakana, cjk-ideographic 2. 3. ul style list-style-type circle, square, none 4. 1. 1-1. 1-1-1. 1 1 1 1 5 1 1 CSS HTML <table> <caption>...</caption> <tr><th>...</th><th>...</th></tr> <tr><td>...</td><td>...</td></tr> <tr><td>...</td><td>...</td></tr> </table> table tr: Table Row th: Table Header td: Table Data thead, tbody, tfoot CSS tables.html Emacs HTML <table> CSS responsive.css responsive.css Emacs Isearch table border-collapse: collapse; border-spacing: 0; separate responsive.css 2 1 table caption font-size: large; padding: 10px 0; 10 Forestgreen HTML CSS th 8px 15px 1px Midnightblue td th td number text-align: right; HTML pre PREformatted Text HTML & & 2 40
ICT IIA/IIB 41 CSS HTML table syle margin-left: auto; margin-right: auto; caption CSS 2 td rowspan 7 7 CSS width: 1em; word-break: break-all; 1 5 euro_ict2b.zip 1. Œ ñ 2. HTML 3. 4. width: 1em; word-break: break-all; 6 lang tables.html 3 4 1 :lang() :nth-child() KHM ICT IIB HTML *.html html lang <html lang="ja"> ja lang HTML Global Attribute html HTML html lang HTML 3 Kinder- und Hausmärchen 10 KHM <table lang="de"> HTML table :lang() responsive.css table:lang(de) table td table td 1px forestgreen, 37 th lang td seagreen 8px 15px 1px darkseagreen td th td lang table number table caption :lang green CSS ::before 2 ISO-3166 REGIONAL INDICATOR SYMBOL LETTER A U+1f1e6 Z U+1f1ff 41
42 ICT IIA/IIB 2 1f1ff 16 CSS content \1f1e6\1f1f9\a0 39 nth-child 3 1 :nthchild() HTML tr style background-color 1 1 CSS table tr:lang(de)+tr:nth-child(2n+1) + table tr de tr lightgreen nth-child 2n odd, even 4, 5, 6 3 CSS responsive.css th, td th, td td table noborder td border none responsive.css Web ivs.html noborder tables.html responsive.css html lang ja table :lang(ja) :lang(ja) tables.html 1, 2 responsive.css lang ja2 html ja HTML tables.html 6 euro_ict2b.zip 1. responsive.css ja2, fr, en lang 2. responsive.css 1, 4, 7, 10 3. tables.html responsive.css ja2 ja tables.html 1, 2 4. tables.html 7 ICT IIA 14, 15 lglf_base.css 32 responsive.css lang ja 1 1em p:lang(ja) em n M en-dash, emdash :lang(ja) 42
ICT IIA/IIB 43 1 p 1 style CSS HTML 1 p p 1 div span style CSS em strong div span em strong em, strong i b i, b em, strong em, strong CSS color color HTML em, strong color CSS color bigger font-size large em, strong bigger CSS HTML <strong class="color bigger"> h1, h2,... h3 { color: #ffff74; background-color: darkblue; font-size: large; padding-left: 0.5em; padding-right: 0.5em; } responsive.css h1, h2, h3 font-size xxlarge, x-large, large text-align padding padding-left line-height responsive.css Web Web ivs.htmlweb Web Rendering Web Web Typography Web eot, ttf, woff, woff2 4 4 woff ivs.html Google Noto IPAmj 2 Web Glyph 2 No more Tofu! no_more_tofu.html ivs.html Noto Google Fonts Google CSS noto.css @import 43
44 ICT IIA/IIB notosansjp.css Noto notosanslinearb.css Noto B; ivs.html no_more_tofu.html notosanstc.css Noto notosanssc.css Noto notosanskr.css Noto 5 CJK Google Google CSS.noto { font-family: "Noto Sans", "Noto Sans CJK JP"; } noto noto.css HTML noto Noto IPAmj Google 2018 1 ipamjm.ttf 44.3MB ipamjm.woff/woff2 29.6MB/21.9MB; woff: Web Open Font Format noto.css @font-face { font-family: "ipamjm"; src: url("ipamjm.woff2") format('woff2'), url("ipamjm.woff") format('woff'), url("ipamjm.ttf") format('truetype'); font-display: swap; } IPAmj Web url *.woff[2], *.ttf noto.css css ipamjm CSS HTML Noto Noto IPAmj Web IPAmj Web Google Chrome Web IPAmj TEX ICT IIA 8 Adobe-Japan1-6 23,058 13 Adobe-Japan1-6 58,862 Moji_Joho 28, 28 HTML Web HTML VS: Variation Selector 葛16 16 IVD_Charts_Adobe-Japan1.pdf IVD_Charts_Moji_Joho.pdf responsive.css.tategaki { -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; display: inline-block; height: 15em; text-align: left; } 44
ICT IIA/IIB 45 writing-mode vertical-rl Vendor Prefix HTML ivs.html HTML OpenType font-feature-settings CSS3 palt; pkna; responsive.css palt, pkna HTML tbox div responsive.css tbox text-align right, left, center right right to left div dir Direction rtl ivs.html 7 euro_ict2b.zip 1. multilang.html 1 crimson font-size large 2. em, strong purple HTML 3. responsive.css h1, h2, h3, h4 4. Noto IPAmj Web HTML Noto 2 IPAmj 5 5. ivs_palt.html palt pkna 6. ivs.html RTL 8 Web Web Web Navigation Web HTML nav ul ol *.html CSS a RWD index.html HTML Web responsive.css topnav HTML Font Awesome HTML Font Awesome all.css font-awesome-animation.css multilang.html <nav> <div class="topnav" id="mytopnav"> <a href=...><i class=...></i>...</a> <a href=...>...</a>... <a href="javascript:void(0)"... onclick="myfunction()"><i class=...></i></a> </div> </nav> <script> function myfunction() {... } </script> 45
46 ICT IIA/IIB nav RWD HTML script JavaScript JavaScript Web HTML topnav CSS topnav #333333 a #f2f2f2 17px 14px 16px active darkblue white a a:hover #dddddd black icon a HTML href javascript:void(0) a onclick myfunction() JavaScript i 620px Font Awesome 3 Font Awesome all.css font-awesome-animation.css CSS 620px a 3 myfunction() HTML id mytopnav DOM Document Object Model; x topnav responsive True 3 a responsive topnav topnav responsive a 3 a * box-sizing borderbox width responsive.css *.html HTML, CSS, JavaScript 3 External Resources Web multilang.html w3.css*2 HTML head link w3.css <div class="w3-row"> <span lang="ja"> <div class="w3-quarter w3-container"> <p>......</p> </div> </span> <span lang="de"> <div class="w3-quarter w3-container"> <p>... Text auf Deutsch...</p> </div> </span> <span lang="fr"> <div class="w3-quarter w3-container"> <p>... Texte en Français...</p> </div> </span> <span lang="en"> *2 Web W3Schools CSS Web 46
ICT IIA/IIB 47 <div class="w3-quarter w3-container"> <p>... Text in English...</p> </div> </span> </div> HTML 4 4 620px w3-quarter w3-half 2 w3-third 3 index.html Google Maps API Application Programming Interface Google Map Web Dark Sky API Web Widget Web API API HTML iframe Inline Frame Web Web 8 euro_ict2b.zip 1. multilang.html w3.css 3 HTML 2. #ffff74 3. 3 fa-bars fa-angle-double-down 9 HTML <a href="https://...">dark Sky API</a> a href HTML PDF Web MS-Word Excel href Web Web Web index.html Google Maps APIDark Sky API a href CSS a HTML a href index.html Emacs a responsive.css ICT IIB 3 37 HTML JPEG Joint Photograph Experts Group PNG Portable Network Graphics GIF Graphics Interchange Format jpg, png, gif HTML img <img src="./jpg/sw_leg.jpg" style="max-width: 100%; height: auto;" alt=" " /> src 47
48 ICT IIA/IIB style CSS max-width 100% height auto alt Alternate text img style width float left, right margin-left/top/right/bottom border-radius opacity 0.0 1.0 0 div style text-align center multilang.html img style index.html EURO ICT Emacs, HTML5, EURO ICT TEX, CSS3 responsive.css body.bgimg { background-image: url("../jpg/bgimg_pale.jpg"); background-position: center top; // background-repeat: no-repeat; -moz-background-size: contain; background-size: contain; } background-image background-position left, center, right 3 center top, center, bottom 3 top background-size contain cover, auto, Vendor Prefix contain // responsive.css h1 h1 backgroundsize cover Web h1 9 euro_ict2b.zip 1. responsive.css a teal red 2. multilang.html img style 3. responsive.css h1 background 10 Web Form HTML CGI Common Gateway Interface PHP PHP: Hypertext Preprocessor Java- Script form action mailto method post 48
ICT IIA/IIB 49 HTM JavaScript form javascript.html javascript.html <form name="tlform"> <input type="radio" name="tlradio" id="de"... <input type="radio" name="tlradio" id="fr"... <input type="radio" name="tlradio" id="en"... <input type="radio" name="tlradio" id="ja"... </form> input type checkbox, text, textarea input name tlradio tl translate Object-Oriented Programming JavaScript Object-Oriented Programming Language Object-Based Programming Language HTML Web JavaScript window HTML document JavaScript window. window window, document, form, radio document.tlform.tlradio tl.form, tlradio HTML form form input name document 1 HTML name javascript.html form Deutsch, Français, English, 4 DOM Document Object Model Web HTML Web HTML form input type radio onclick tltextto(value) value tltextto onclick JavaScript Event Handler click tltextto(value) JavaScript script HTML JavaScript script javascript.html window.onload = init; function init() { document.tlform.tlradio[3].checked = true; } function tltextto(value) { var iddiv = document.getelementbyid('khm53ja'); 49
50 ICT IIA/IIB } switch(value) { case "de": iddiv.innerhtml = "..."; break; case "fr":... } window onload Web HTML init init function document HTML tlfrom form tlradio 3+1 init Parenthesis 1 Statement, JavaScript ; function value tltextto iddiv HTML khm53ja id div 1 switch de, fr, en, default ja iddiv iddiv.innerhtml case break break case default Usability label for id 10 euro_ict2b.zip 1. javascript.html break; 3 2. Français HTML 3. label 11 HTML C-c C-d CSS Web position float 2 position relative, absolute, fixed absolute, static 4 relative absolute ICT IIB HTML/CSS *.html, *.css fixed, static all.css w3.css static static fixed position relative absolute noto.css \noindent.text_sample note { position: relative; margin-top: 1em; display: block; text-align: right; 50
ICT IIA/IIB 51 } color: #888888; font-size: 70%; }... CSS no_more_tofu.html 3 Noto Noto Noto text_sample note 3 note noto.css relative absolute no_more_tofu.html position top, bottom, left, right 4 margin-top top relative note margin-top text-align absolute note margin-top text-align absolute text-align right display block position absolute responsive.css 620px a ICT IIB 8 46 620px a 3 @media screen and (max-width: 620px) {.topnav.responsive {position: relative;}.topnav.responsive.icon { position: absolute; right: 0; top: 0; } position relative a 3 a 3 3 position absolute right, top 0 relative 3 a float ICT IIB 3 37 float responsive.css.left { background-color: #e5e5e5; float: left; width: 20%; text-align: center; padding: 10px; } float Width 100% width float float width a display block width a float left, right none index.html float RWD Web ICT IIB 3 51
52 ICT IIA/IIB 37 responsive.css multilang.html img float index.html, responsive.css, multilang.html Web FrakturMaguntia Web junicode.html 2 1 Fraktur UnifrakturMaguntia OpenType *3 Maguntia *4 UnifrakturMaguntia Web unifrak.css eot, woff2, woff, ttf, svg Web Web Web Font Squirrel UnifrakturMaguntia Fraktur 16 UnifrakturMaguntia16*5 Web UnifrakturMaguntia16 cv11 s f cv12 r cv13 I J cv14 Ä Ae cv15 ä e a e cv19 Gedankenstrich en-dash em-dash hlig etc. lnum ss02 Und bevor Vnd beuor cv Character Variants Stylistic Sets Hirtoric Ligatures UnifrakturMaguntia16 Web unifrak16.css FrakturMaguntia ch, ck, st, tz (Ě Ę Ć Ń) 4 sz ȷ 5 UnifrakturMaguntia OpenType HTML Zero Width Non-Joiner HTML letter-spacing CSS 0.3em junicode.html UnifrakturMaguntia OpenType Der Ärger des Igels liegt auf der schönen Königsstraße. HTML Der Arger } deŋ IgelŊ liegt auf der ŊĚŽnen KŽnigŊŊtraȷe. UnifrakturMaguntia Der Aerger deŋ IgelŊ liegt auf der sěźnen KŹnigŊĆraȷe. UnifrakturMaguntia16 Mozilla Firefox, Google Chrome, Safari Web Junicode Web Junicode Peter S. Baker Unicode 17 Junicode Franciscus *3 *4 1901 Carl Albert Fahrenwaldt Mainzer Fraktur Peter Wiegel Berthold Mainzer Fraktur Gerrit Ansmann OpenType FrakturMaguntia *5 17, 18, 19, 20, 21 21 21 Fraktur 52
ICT IIA/IIB 53 Junius Junicode Junicode Web junicode.css junicode.html *6 *7 4 *8 Transliteration ss02 ss19 junicode.html Web Emacs 16 junicode.html PC, 2 1 w3.css HTML 11 euro_ict2b.zip 1. responsive.css noto.css position relative absolute 2. Web UnifrakturMaguntia Junicode 3. junicode.html 12 Web Web HTML junicode.html access_fn.css HTML a id href id # a href id ol, li aria-describedby footnote-label aria-label Back to content WAI-ARIA Web Accessibility Initiative Accessible Rich Internet Applications Web Web Web Web Web Header Nav Main AsideFooter HTML header, nav, main, aside, footer ICT IIB Web index.html index.html h1 h3 a h2 *6 7 9 *7 *8 53
54 ICT IIA/IIB h3 index.html Web 3 PaneRWD 620px 1 index.html h1 a h2 Web RWD Web Web css jpg js JavaScript png Web fonts, webfonts HTML Web Web Web HTML Internet Bot, Web Robot, Bot Web Web Web index.html footer Comment to: <!-- @nhy.com++ -->ynaga<!-- 12334@... HTML HTML HTML <!--... --> CSS /*... */ CSS 1 // JavaScript CSS Web JavaScript Web & Emacs C-x C-; toggle major mode Emacs 26 HTML CSS JavaScript C-x C-; 12 euro_ict2b.zip 1. index.html index.html *.html header, nav, main, aside, footer Web 2. 54
ICT IIA/IIB 55 JavaScript 13 3 JavaScript Web JavaScript Web Web JavaScript Web Web JavaScript Programming Language Machine Code High-Level Programming Language Source Code CPU Central Processing Unit; Compiler System Interpreter System 2 Object Code; TEX *9 1 JavaScript HTML Web HTML JavaScript HTML script *.js HTML JavaScript Web JavaScript Ecma International (Ecma: European Computer Manufacturers Association) ECMAScript ICT IIB 10 48 JavaScript Object Property Method JavaScript JavaScript Emacs Emacs Syntax Highlight JavaScript OS Web Microsoft Edge, IE, Mozilla Firefox, Google Chrome, Safari TEX, HTML, CSS JavaScript UTF-8 LF JavaScript JavaScript HTML Web HD Hard Disc *9 *.tex uplatex, dvipdfmx, pdflatex *.pdf TEX 55
56 ICT IIA/IIB Microsoft Internet Explorer JavaScript JavaScript *10 Emacs Web javascript.html Emacs, HTML head script *.js js HTML JavaScript HTML script HTML JavaScript JavaScript myfunction() ICT IIB 8 46 script document.write("<p>.. +.. + </p>");... document Web 1 HTML JavaScript. write HTML write Parenthesis "..." '...' 2 1 " ' \ write,, Operator + + 1 Statement ; platform.description platform description JavaScript. platform description External Libraries platform.js javascript.html OS Web Return Value document.write OS Web HTML noscript JavaScript JavaScript Web JavaScript Web JavaScript 13 euro_ict2b.zip 1. Microsoft Edge, Internet Explorer, Mozilla Firefox, Google Chrome, Safari Web javascript.html 2. javascript.html script document.write " ' 3. +, 4. Web javascript.html platform.description Web *10 IE 56
ICT IIA/IIB 57 14 JavaScript 4 1. JavaScript 2. 3. 4 javascript.html script var now = new Date(); var year = now.getfullyear(); var date = now.getdate(); var dmonth = new Array("Januar",...); var fmonth = new Array("janvier",...); var emonth = new Array("January","...); var dday = new Array("Sonntag",...); var fday = new Array("dimanche",...); var eday = new Array("Sunday",...); var jday = new Array(" ",...);... Web document Date JavaScript Build-In Object JavaScript var Variable now new Date() Instance new new Constructor Date Date Date var datum = new Date(2018,8,6,18,40,36); 2018 9 6 18 40 36 Date 2 8 1 new Date() now getfullyear(), getdate() 4 1 31 year, date Array dmonth fmonth emonth Array dday, fday, eday, jday var dmonth = dmonth[now.getmonth()]; var fmonth = fmonth[now.getmonth()]; var emonth = emonth[now.getmonth()]; var dday = dday[now.getday()]; var fday = fday[now.getday()]; var eday = eday[now.getday()]; var jday = jday[now.getday()]; document.write("<p style=... </p>"); document.write("<p style=... </p>"); document.write("<p style=... </p>"); document.write("<p style=... </p>"); dmonth now.getmonth() 0, 1, 2, 57
58 ICT IIA/IIB dmonth dday now.getday() dday fmonth/fday, emonth/eday, jday year 4 dmonth/fmonth/emonth dday/fday/eday/jday String Literal + document.write CSS background-color color now.getmonth() + 1 get- Month 0 110 1 11 12 getday 0 60 6 Berlin, Paris, London Berlin, Paris, London javascript.html Web 1. 2. 3. 4. 5. 3 2 3 10 3 2 6. 7. UTC: Universal Time Coordinated 8. JST: Japanese Standard Time CET: Central European Time CEST: Central European Summer Time GMT: Greenwich Mean Time BST: British Summer Time JavaScript Berlin, Paris, London moment-with-locales.js, moment-timezonewith-data.js 2 12 platform.js 8 w3.css, 11 access_fn.css Web JavaScript Paris, London, script JavaScript div <div id="cetd"></div>... var updatecetd; (updatecetd = function() { moment.locale('de'); document.getelementbyid("cetd").innerhtml = "<p style..."</p>"; })(); setinterval(updatecetd, 1000); updatecetd 1 updatecetd Camel Case; UpdateCetd 58
ICT IIA/IIB 59 Pascal JavaScript camelcase snake_case, kebab-case *11 updatecetd moment-with-locales.js moment.locale Locale document getelementbyid id cetd HTML div id 1 HTML Unique HTML DOM Document Object Model DOM HTML Node DOM innerhtml HTML HTML updatecetd id cetd div innerhtml div innerhtml moment().tz("europe/berlin"). format("dddd, Do MMMM YYYY HH:mm:ss (Z z)") moment-with-locales.js momenttimezone-with-data.js moment tz Time Zone format dddd Freitag Do 1, 2, 3 1st, 2nd, 1., 2. MMMM YYYY 4 HH:mm:ss 24 2 Z z dddd Token; Google Moment.js Documentation/Docs/Display/Format setinterval updatecetd 1000 1 14 euro_ict2b.zip 1. javascript.html JavaScript Web 2. Paris, London format 15 DOM Web Web Event JavaScript ICT IIB 10 49 DOM 2 *11 59