HTML (HyperText Markup Language) é uma linguagem de marcação utilizada para produzir páginas na Web. Documentos HTML podem ser interpretados por navegadores. Trata-se de uma linguagem simples e bem leve, por isso ela é o padrão da Internet.
Os documentos em HTML são como arquivos ASCII comuns, que podem ser editados em vi, emacs, textedit, notepad, ou qualquer editor simples.
A estrutura básica de um documento HTML apresenta os seguintes componentes:
<html> <head><title>Titulo do Documento</title></head> <body> ... </body> </html> |
O HTML é uma linguagem que baseia sua sintaxe em um elemento de base que chamamos etiqueta (tag). A etiqueta apresenta frequentemente duas partes:
Uma abertura de forma geral <etiqueta>
Um fechamento do tipo </etiqueta>
As etiquetas podem ser escritas com qualquer tipo de combinação entre maiúsculas e minúsculas.
Ou seja, tanto faz escrever <HTML>, <Html>, <html>, <HtMl>, ...
Entretanto, é aconselhável acostumar-se a escrevê-las em minúscula já que outras tecnologias que podem conviver com nosso HTML (XML por exemplo) não são tão permissivas e nunca está mal ter bons costumes desde o princípio para evitar falhas triviais no futuro.
Tudo que estiver incluído no interior de uma etiqueta sofrerá as modificações que caracterizam a etiqueta. Como por exemplo: <title> define um título, que é mostrado no alto da janela do browser.
O conteúdo da página propriamente dita deve ser inserido dentro da etiqueta <body>. Para criar uma tabela é usada uma etiqueta <table>. Cada linha da tabela é delimitada por etiquetas do tipo <tr> (table row). Em cada linha as células são inseridas por meio das etiquetas <td> ou <th>, com a diferença que no último caso o texto aparece em negrito e centralizado. As etiquetas podem apresentar atributos como o bgcolor="#RRGGBB" que altera a cor de fundo, onde RR representa o vermelho (red), GG o verde (green) e BB representa o azul (blue) em formato hexadecimal. As demais cores são obtidas por combinações dessas três cores básicas. Para maiores informações consultar os links externos presentes nessa página.
Abaixo seguem alguns exemplos:
<table border="0" cellspacing="1" cellpadding="5"> <tr bgcolor="#FFFFFF"> <th>res</th> <th>dia da semana</th> </tr> <tr bgcolor="#CCFFFF"> <td>0</td> <td>sabado</td> </tr> <tr bgcolor="#FFCCFF"> <td>1</td> <td>domingo</td> </tr> <tr bgcolor="#CCFFFF"> <td>2</td> <td>segunda-feira</td> </tr> <tr bgcolor="#FFCCFF"> <td>3</td> <td>terca-feira</td> </tr> <tr bgcolor="#CCFFFF"> <td>4</td> <td>quarta-feira</td> </tr> <tr bgcolor="#FFCCFF"> <td>5</td> <td>quinta-feira</td> </tr> <tr bgcolor="#CCFFFF"> <td>6</td> <td>sexta-feira</td> </tr> </table> |
|
<table border="0"> <tr bgcolor="#FFFFFF"> <th colspan="3">Monitores:</th> </tr> <tr bgcolor="#FFFFFF"> <th>Turma</th> <th>Nome</th> <th>Email</th> </tr> <tr bgcolor="#CCFFFF"> <td>A,B,0</td> <td>Andre Nazareth</td> <td>andre.lnc[at]gmail.com</td> </tr> <tr bgcolor="#FFCCFF"> <td>C,D,1</td> <td>Alexandre Pereira Prado</td> <td>ra007958[at]students.ic.unicamp.br</td> </tr> </table> |
|
||||||||||||
Links externos:
Atividade:
Para um ano e mês fornecidos pelo usuário via teclado o programa deve gerar um documento HTML contendo o calendário do mês correspondente.
Os programas que vocês fizeram até agora imprimiam na saída padrão (terminal). Para imprimir em um arquivo "calendario.html" em modo texto é bem fácil. Na parte onde são declaradas as variáveis você deve inserir a declaração de um identificador de arquivo: FILE *fp;. Depois você deve abrir o arquivo "calendario.html" em modo de gravação (write) usando o comando: fp = fopen("calendario.html","w");. Agora onde você usava printf(...); você muda para fprintf(fp,...);. Ex:
fprintf(fp,"<html>\n");
No final do código (antes do return) você deve fechar o arquivo através do comando: fclose(fp);.
Abaixo segue um possível exemplo de calendário em HTML:
| DEZEMBRO | 2007 | |||||
|---|---|---|---|---|---|---|
| DOM | SEG | TER | QUA | QUI | SEX | SAB |
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 | 31 | |||||
<html> <head> <title>Calendario</title> </head> <body bgcolor="#D4DDED"> <table border="0" bgcolor="#FFFFFF"> <tr bgcolor="#FFFFFF"><th colspan="4">DEZEMBRO</th><th colspan="3">2007</th></tr> <tr bgcolor="#FFFFCC"><th>DOM</th><th>SEG</th><th>TER</th><th>QUA</th><th>QUI</th><th>SEX</th><th>SAB</th></tr> <tr bgcolor="#FFCCFF"><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> 1</td></tr> <tr bgcolor="#CCFFFF"><td> 2</td><td> 3</td><td> 4</td><td> 5</td><td> 6</td><td> 7</td><td> 8</td></tr> <tr bgcolor="#FFCCFF"><td> 9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td></tr> <tr bgcolor="#CCFFFF"><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td></tr> <tr bgcolor="#FFCCFF"><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td></tr> <tr bgcolor="#CCFFFF"><td>30</td><td>31</td><td> </td><td> </td><td> </td><td> </td><td> </td></tr> </table> </body> </html> |
Forma de entrega:
Enviar por email para o monitor da sua turma. Colocar na mensagem o nome completo, RA e turma a que pertence. No assunto da mensagem colocar "MC102 - Entrega Lab04", para facilitar a separação dos emails relativos a entrega em uma pasta a parte através de um filtro de email.
Observações:
Esse programa é essencialmente uma evolução da atividade do lab anterior. Logo não é tão difícil quanto parece.
O calendário gerado não precisa ser idêntico ao do exemplo acima, você pode selecionar as cores da sua preferência, etc.