cirops/Exercises for Emmet

## Exercises for Emmet
1) Look up on the internet the simple code for generating the base html5 structure;

2) What would be the code for generating the following structure:
<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

3) What would be the code for generating a table with 10 rows and 2 columns?

4) Create a code for generating the following structure:
<html>
    <head>
        <title></title>
    </head>
    <body></body>
</html>

5) Create a code for representing an 8x8 checkers board, such that a td which would represent a black cell has the class "black", and the same logic for the white cells.

6) Explain (with words, briefly) what the following code would generate:
table>tr*3>td*5

7) Create a webpage with a 5*5 table with the background color teal and the rows counting one through five;

8) Create an ordered list of 12 images, such as their source images would be inside the "img" folder, and were called image[1-12].png, and having the alt with their respective order;

9) create the code for a yellow table the shape of an "L" (the table has to have "border" enabled).

10) Join the results of the previous two exercises by pointing each of them in a different div, and both at the same level;

11) Create a webpage consisting of three parts:
    * Banner: Will be an image stored inside "img" folder, called "banner.jpg"
    * Content: will have a list of 10 posts (such as a blog), and will be positioned to the left, and beneath the banner. The posts will have the following structure:
        - title (h3, centered);
        - content (paragraph, justified);
        - caption for "add comments";
        - textarea for comments;
        - submit button with form action to "comment.php" and method = post;
        - link for the respective comments page (up to you, just need to have a link beneath);
    * Sidebar: will have a list of links to previous pages, numbered 1 through 10;
    (Whether you add the styles to keep the content and sidebar side by side from an external file or using the style property of the divs is up to you);


//ANSWERS BELOW


Obs: Some of these answers may not be the best practices, but instead are used for educational purposes (sometimes overcomplicated on purpose)

1)
html:5

2)
div>ul>li*3

3)
table>tr*10>td*2

4)
html>(head>title)+body

5)
table.board>((tr>(td.black+td.white)*4)+(tr>(td.white+td.black)*4))*4

6) A table with three rows and 5 columns;

7)
html:5>table[style="background-color: teal"]>tr*5>td{$}*5

8)
ol>(li>a[src="img/image$.png"][alt="Image $"])*12

9)
table>(tr*10>td[style="background-color: yellow"]*5)+(tr*5>td[style="background-color: yellow"]*15)

10)
(div>(ol>(li>a[src="img/image$.png"][alt="Image $"])*12))+(div>table>(tr*10>td[style="background-color: yellow"]*5)+(tr*5>td[style="background-color: yellow"]*15))

11) Answer using an external css file called css/style.css (which is left as further exercise to create)
html:5>(link[rel="stylesheet"][type="text/css"][href="css/style.css"]>)+div#wrap>(div#banner>img[src="img/banner.png"]>a[href="home.php"][alt="Blog"])+(div#content>div.post*10>center>(h3{This is post $})+p{This is a default text, acting as a placeholder for post $.}+br+p{Please comment!}+form[method="get"]>(input[name="comment"][type="text"])+input[type="submit"][value="Submit"])+(div#sidebar>ul>(li>a[href="page$.php"]{Page $})*10)
	1) Look up on the internet the simple code for generating the base html5 structure;

	2) What would be the code for generating the following structure:
	<div>
	<ul>
	<li></li>
	<li></li>
	<li></li>
	</ul>
	</div>

	3) What would be the code for generating a table with 10 rows and 2 columns?

	4) Create a code for generating the following structure:
	<html>
	<head>
	<title></title>
	</head>
	<body></body>
	</html>

	5) Create a code for representing an 8x8 checkers board, such that a td which would represent a black cell has the class "black", and the same logic for the white cells.

	6) Explain (with words, briefly) what the following code would generate:
	table>tr3>td5

	7) Create a webpage with a 5*5 table with the background color teal and the rows counting one through five;

	8) Create an ordered list of 12 images, such as their source images would be inside the "img" folder, and were called image[1-12].png, and having the alt with their respective order;

	9) create the code for a yellow table the shape of an "L" (the table has to have "border" enabled).

	10) Join the results of the previous two exercises by pointing each of them in a different div, and both at the same level;

	11) Create a webpage consisting of three parts:
	* Banner: Will be an image stored inside "img" folder, called "banner.jpg"
	* Content: will have a list of 10 posts (such as a blog), and will be positioned to the left, and beneath the banner. The posts will have the following structure:
	- title (h3, centered);
	- content (paragraph, justified);
	- caption for "add comments";
	- textarea for comments;
	- submit button with form action to "comment.php" and method = post;
	- link for the respective comments page (up to you, just need to have a link beneath);
	* Sidebar: will have a list of links to previous pages, numbered 1 through 10;
	(Whether you add the styles to keep the content and sidebar side by side from an external file or using the style property of the divs is up to you);


	//ANSWERS BELOW















	Obs: Some of these answers may not be the best practices, but instead are used for educational purposes (sometimes overcomplicated on purpose)

	1)
	html:5

	2)
	div>ul>li*3

	3)
	table>tr10>td2

	4)
	html>(head>title)+body

	5)
	table.board>((tr>(td.black+td.white)4)+(tr>(td.white+td.black)4))*4

	6) A table with three rows and 5 columns;

	7)
	html:5>table[style="background-color: teal"]>tr5>td{$}5

	8)
	ol>(li>a[src="img/image$.png"][alt="Image $"])*12

	9)
	table>(tr10>td[style="background-color: yellow"]5)+(tr5>td[style="background-color: yellow"]15)

	10)
	(div>(ol>(li>a[src="img/image$.png"][alt="Image $"])12))+(div>table>(tr10>td[style="background-color: yellow"]5)+(tr5>td[style="background-color: yellow"]*15))

	11) Answer using an external css file called css/style.css (which is left as further exercise to create)
	html:5>(link[rel="stylesheet"][type="text/css"][href="css/style.css"]>)+div#wrap>(div#banner>img[src="img/banner.png"]>a[href="home.php"][alt="Blog"])+(div#content>div.post10>center>(h3{This is post $})+p{This is a default text, acting as a placeholder for post $.}+br+p{Please comment!}+form[method="get"]>(input[name="comment"][type="text"])+input[type="submit"][value="Submit"])+(div#sidebar>ul>(li>a[href="page$.php"]{Page $})10)