M2 S1 Building a Web
Section outline
-
To be completed:Quizzes 3 100%
Website Project: 200%
Food content and terminology: 200%.Website.
assessment:Create html code, Design Layout, Adding colours, Linking 5 pages, adding images, Select 4 different foods in 4 different cooking styles. Describe cooking menus tastes using a full range of words. Illustrate with many pictures.Web Page
The art of Self Discipline
Website Design
A project to create a website on your computer
The site will be created using text editors.
We will study a basic web page layout.
We will use HTML coding which stands for HyperText Markup Language
The focus of web will be foods cooking and critique terminology. (describing the food.)
Foods critique will be from 4 different methods of cooking/preparing and food types.
Examples might be: baking, frying, boiling, fermenting.
..
Starting folder setup.
.
-
Prepare Cook Types Tastes
The art of Self Discipline
Cooking food
BoilHeat water till it bubbles at 100oC SteamSteam is water gas hotter than 100oC PressureA special cooking pot that is sealed builds up pressure inside making the liquids hotter than 100oC
Pressure CookerThe name of a special cooking pot that is sealed to cook food at hotter than 100oC Bake When food is place in an oven to control the heat as in cooking bread BarbecueWhen food is placed over an open flame. Often used for outdoors cooking
RoastWhen food is placed in an oven to cook slowly and keep the moisture in the food. FryWhen food is placed in a pan with some oil and cooked at very hot temper-atures. sautéWhen food in a pan with a litle oil is cooked hot to remove moisture but lightly cook the inside of the food. Stir FryWhen small pieces of food are placed in a very hot pan with some oil and stirred with a ladel.
Pre-cookWhen food is partly cooked, (often steamed or boiled) to be ready to finally cook a little later on. ScrambleWhen eggs are vigorously mixed with a little water and fried in a pan with a little oil. SmokeWhen the meat is over a smoky fire the smoke will cook the meat giving it a special flavour and stop the meat from going bad. Soft BoilHow an egg is cooked in its shell in boiling water. Either hard boiled or soft boiled. Hard BoilHow an egg is cooked in its shell in boiling water. Either hard boiled or soft boiled. SearAfter meat is cooked slowly so still moist in center sometimes it will be placed on a very hot plate to lightly burn the outside. SimmerWhen cooking in a pot of water, food can be left to simmer, at lower than boiling point, for a long period of time. Slow CookSimilar to simmer. Lower heat is used for longer periods of time. ToastWhere a slice of bread is held close to a flame or hot element. MicrowaveAn oven that uses microwaves to create heat inside the food. French FryWhen food is placed in a large deep pot of boiling oil. HeatTo heat food is to warm it up again so it is nicer to eat.
Deep FryWhen food is placed in a large deep pot of boiling oil. BurnWhen food is cooked too hot for too long it will start to turn black. GrillWhen food is placed on bars over a naked flame or close to a very hot element.
Preparing food.
RiseWhen making bread yeast is added to the dough to make it rise or get bigger BatterA flour and water mix used to cover food before it is deepfried. BlanchTo dip food (often fruit) into boiling water then remove and place in cold water. BrewWhen yeast is added to a mixture of fruit and left, it will ferment, that is to brew
BasteTo brush oil onto food while it is cooking to stop it from drying out BlendTo mix ingredients together. Often done in a machine called a blender. CaramelizeTo brown sugars in a process to make caramel. DiceTo cut food up into small slices
De-boneTo remove the bones from meat like chicken or beef. De-scaleor just scale the fish is to remove the scales of the surface of a fish before cooking. FilletTo carefully cut the meat off the sides of fish so there are no bones.More Preparing food.
FermentWhen yeast is added to a mixture of fruit and left, it will brew, that is to ferment. FreezePlace food in a fridge to turn the moister into ice for preserving. DoughWhen flour and water are carefully mixed and squeezed it is a springy lump called dough
KneadWhen dough is pushed punched and folded to make it ready for baking it is to knead the dough DrizzleTo lightly drip or spray liquid onto the top of bread or buns for flavour and appearance JellWhen gellatine is added to water it makes it thickens and forms a rubbery like jell. JuiceWhen fruit and many vegetables are squeezed the liquid can be removed as the juice.
MarinateA liquid with seasoning and vinegar to soak meat It start it pickling before cooking. PreserveWhen fruits are cooked and then placed in bottles to vacumn seal. This preserves the fruit for a long time. SeasoningTo improve the taste of food with salt herbs and spices. The mixture is called seasoning. GarnishWhen herbs etc., are added to a meal. For example the omelette was garnished with parsley
Types of food.
Bread
Cake
Muffin
Crepe
Raisin Bread
Steak
Vegetable
Stew
Omelette
Desert
Fish
Crab
Seafood
Fruit
Nuts
Taste of food and eating
Add these words sets: skillet, garnish, spooning,.
.
.
.
.
.
.
.
.
-
Submits Quizzes Exams
The art of Self Discipline
Website Design
.
.
.
.
-
Opened: Monday, 8 July 2024, 11:00 PMDue: Monday, 15 July 2024, 11:00 PMWebsite folder zipped 10
Upload The zipped website folder with all your files. (zip=compressed)
Minimum 4 pages. 5 pages for bonus marks. -
Students mustReceive a gradeReceive a passing gradeAttributes Quiz 100%
3 questions about what do these attributes do when you place them in styles that are in tags -
Students mustReceive a gradeReceive a passing gradeCode for Website Page Quiz 100%
4 questions about how does a website page get created. -
Students mustReceive a gradeReceive a passing gradeContainers Quiz 100%
5 questions about how are containers used on a website -
Students mustReceive a gradeReceive a passing gradeQuiz about cooking.
10 questions to help you talk and write about cooking. -
Students mustReceive a gradeReceive a passing gradeAnother quiz cooking
Another 7 questions to help you learn more words used when cooking food -
Students mustReceive a gradeReceive a passing grade06 Food Preparation
10 questions on food preparation words to help you learn more words used when preparing food -
Students mustReceive a gradeReceive a passing gradeTaste Words
12 questions from words commonly used when describing taste
-
-
Basic Web Page
The art of Self Discipline
A Basic Web Page
A basic web page has these parts.
01) All HTML code has less than < and greater than > signs around the code. These pieces of code are called 'tags'
02) The first tag is the <!DOCTYPE> type. It tells the browser the web standards used.
02a) The <html> tag next tells the browser the type of code to look for on the page.
HTML stands for HyperText Markup Language
02b) An <html> must have an opening and a closing </html> tag.
03) The <head> tag is next. It opens and closes before the <body> tag.
04) Next is the <body> tag.
04a) The <body> tag is the start of what you see.
04b) A <body> tag must have an opening and a closing </body> tag.
04c) There can be only one <body> </body> tag (opening and closing) per web site page.<head> tags on a website</head>
3 more tags can be added to a web page to give the browser more information
These tags go in the <head> tag.
The first tag is the opening <head> tag.
The <head> tag contains the <meta> </meta> tag and the <title> </title> tag
The <meta> </meta> tag contains data about the web page, and things like character sets (language) and display types.
There can be several <meta> </meta> tags for a web page.
A <meta> tag must also have a </meta> closing tag.
The <title> </title> tag has name of your website and is what search engines show when you do a search.
The <head> tag can now be closed with a </head> closing tag tag..
.
.
.
<!DOCTYPE html>
<html><head>
<meta></meta>
<title></title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p></body>
</html>
-
Project
The art of Self Discipline
Build a website on your computer
This project is to build a website on your computer using mac text edit, windows notepad or linux kate.
For mac users will need to check settings in 'text edit'.
For windows users 'notepad' should save character sets as UTF-8 (default setting)
Linux users using 'kate' no changes needed as kate will automatically know what you are creating.Step One
A: Create a new folder.
Name the folder my_web_site
All images and files must go into this folder.
B: Change Textedit preferences.Setting up 'Textedit' preferences.
-
Step 2
The art of Self Discipline
Change background colour styles
The body tag is everything you can see when viewing your web page
Styles can be added to tags.
A style contains attributes.
An attribute looks like this:
color: red;
If we add a style and attribute to the body tag we can make the colour change.
A <style=""> can be added to all containers.
When the attribute is added it looks like this:
style="color: red;"
Many attributes can be added to a style.
The colon (and semicolon (;) mark the different attributes.
For example:
style="color: red; font-size: 24px; padding: 10px;"
<body style="background: yellow;">
some content on your web page
</body>.
-
-
Editing Saving
The art of Self Discipline
Editing in text and saving in html
Open your text editor.
Type in basic code for a for a webpage.
Save text with a file ending of .html
Close text file (keep .html)
Double click saved file to open with a web browser.
View your text as a web page.Opening html file to edit
Right mouse button click (RMB) or 2 finger tap and select option to 'Open With'. Select open with 'Text Edit', 'Notepad' or 'Kate' (your text editor).
.
.
.
.
-
Adding an image
The art of Self Discipline
Images
Images have their own tag <img>
An <img> tag is self closing.
<img> tags do not need a closing tag</img>
img tags must have an src attribute.
The src attribute is a link to the image.
The image is kept in another folder.
src="link-to-folder-address"
The src attribute is placed inside the img tag.
A style can also be added inside an img tag.<!DOCTYPE html>
<html><body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<img src="./images/TriumphRocket3.jpg" alt="Rocket3" width="50%" height="50%">
</body></html>
The video tag supports several types of movies at the same time. If the browser cannot support the first type, it moves on and selects the first one that it can play. Or just delete the second one in the list,
<video width="200" height="240" controls>
<source src="images/Sciencecamp2.mp4" type="video/mp4">
<source src="images/Sciencecamp2.mov" type="video/mov">
Your browser does not support the video tag.
</video>
<div style="background-image: url('./images/CradleMountainTasmania.jpg'); background-size: cover;">Text here if needed</div> -
Attributes
The art of Self Discipline
Attributes used in project
background: yellow;
background-image: linear-gradient(to right, lightblue, yellow);
background-image: url('img_girl.jpg');
border: 2px solid black;
border-radius: 20px;
width: 400px;
text-align: center;
padding: 15px;
margin: auto;
margin: 10px;
box-shadow: 13px 13px 2px brown;
box-shadow: inset 13px 13px 2px brown;
font-size: 24px;
font-weight: 800;
color: red;
<br>
A line break
<br>when written anywhere between body tags.
<hr>
A line is created anywhere between body tags
.
-
Links or Hyperlinks
The art of Self Discipline
'Anchor' tag to Link to another page
A basic link to another page.
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools.com!</a>
Adding a button to your link.
<div><a href="https://www.w3schools.com/" target="_blank">
<span style="border: 1px solid red; padding: 10px;"> Visit w3Schools</span>
</a>
</div>.
.
.
-
Colours
The art of Self Discipline
RGB colours
RGB colours are Red Green Blue. rgb(0,255,0)
When combined in different amounts they form up to 16,777,216 colours. rgb(175,12,255)
The best part of rgb colours is that an Alpha channel can be added rgba(255,0,0,.5)
rgba(255,0,0,1) The 'a' set at 1 is full colour.
rgba(255,0,0,0) The 'a' set at 0 is no colour.
rgba(255,0,0,.5) The 'a' set at .5 is half colour and things behind will be seen a little. The colour has opacity. (see through).
The black background has an rgba colour so the colours and words below can be seen a little.
Hexadecimal codes will create 16,777,216 different colours.
A hash #00FF00 must be at the start of the number to tell the computer it is a colour.
Hexadecimal numbers are shorter and take up less space in your code.
Named colours can give you a basic colour palette and are easy to see what the colour is being used.The last number in the position of 'A' is alpha, (a measurement of opacity) .0 is no color. 1 is full color. .5 is half colour see-through.
background: rgba(255,255,0,1);
background: rgba(255,255,0,.5);Color HTML / CSS Name Hex Code #RRGGBB
Decimal Code (R,G,B)
zzz_____________zzzzz Black #000000 rgb(0,0,0) White #FFFFFF rgb(255,255,255) > Red #FF0000 rgb(255,0,0) Lime #00FF00 rgb(0,255,0) > Blue #0000FF rgb(0,0,255) Yellow #FFFF00 rgb(255,255,0) Cyan / Aqua #00FFFF rgb(0,255,255) Magenta / Fuchsia #FF00FF rgb(255,0,255) Silver #C0C0C0 rgb(192,192,192) Gray #808080 rgb(128,128,128) Maroon #800000 rgb(128,0,0) Olive #808000 rgb(128,128,0) Green #008000 rgb(0,128,0) Purple #800080 rgb(128,0,128) Teal #008080 rgb(0,128,128) Navy #000080 rgb(0,0,128) Color Color Name Hex Code #RRGGBB
Decimal Code R,G,B
_________________________ maroon #800000 rgb(128,0,0) darkred #8B0000 rgb(139,0,0) brown #A52A2A rgb(165,42,42) firebrick #B22222 rgb(178,34,34) crimson #DC143C rgb(220,20,60) red #FF0000 rgb(255,0,0) tomato #FF6347 rgb(255,99,71) coral #FF7F50 rgb(255,127,80) indianred #CD5C5C rgb(205,92,92) lightcoral #F08080 rgb(240,128,128) darksalmon #E9967A rgb(233,150,122) salmon #FA8072 rgb(250,128,114) lightsalmon #FFA07A rgb(255,160,122) orangered #FF4500 rgb(255,69,0) darkorange #FF8C00 rgb(255,140,0) orange #FFA500 rgb(255,165,0) gold #FFD700 rgb(255,215,0) darkgoldenrod #B8860B rgb(184,134,11) goldenrod #DAA520 rgb(218,165,32) palegoldenrod #EEE8AA rgb(238,232,170) darkkhaki #BDB76B rgb(189,183,107) khaki #F0E68C rgb(240,230,140) olive #808000 rgb(128,128,0) yellow #FFFF00 rgb(255,255,0) yellowgreen #9ACD32 rgb(154,205,50) darkolivegreen #556B2F rgb(85,107,47) olivedrab #6B8E23 rgb(107,142,35) lawngreen #7CFC00 rgb(124,252,0) chartreuse #7FFF00 rgb(127,255,0) greenyellow #ADFF2F rgb(173,255,47) darkgreen #006400 rgb(0,100,0) green #008000 rgb(0,128,0) forestgreen #228B22 rgb(34,139,34) lime #00FF00 rgb(0,255,0) limegreen #32CD32 rgb(50,205,50) lightgreen #90EE90 rgb(144,238,144) palegreen #98FB98 rgb(152,251,152) darkseagreen #8FBC8F rgb(143,188,143) mediumspringgreen #00FA9A rgb(0,250,154) springgreen #00FF7F rgb(0,255,127) seagreen #2E8B57 rgb(46,139,87) mediumaquamarine #66CDAA rgb(102,205,170) mediumseagreen #3CB371 rgb(60,179,113) lightseagreen #20B2AA rgb(32,178,170) darkslategray #2F4F4F rgb(47,79,79) teal #008080 rgb(0,128,128) darkcyan #008B8B rgb(0,139,139) aqua #00FFFF rgb(0,255,255) cyan #00FFFF rgb(0,255,255) lightcyan #E0FFFF rgb(224,255,255) darkturquoise #00CED1 rgb(0,206,209) turquoise #40E0D0 rgb(64,224,208) mediumturquoise #48D1CC rgb(72,209,204) paleturquoise #AFEEEE rgb(175,238,238) aquamarine #7FFFD4 rgb(127,255,212) powderblue #B0E0E6 rgb(176,224,230) cadetblue #5F9EA0 rgb(95,158,160) steelblue #4682B4 rgb(70,130,180) cornflowerblue #6495ED rgb(100,149,237) deepskyblue #00BFFF rgb(0,191,255) dodgerblue #1E90FF rgb(30,144,255) lightblue #ADD8E6 rgb(173,216,230) skyblue #87CEEB rgb(135,206,235) lightskyblue #87CEFA rgb(135,206,250) midnightblue #191970 rgb(25,25,112) navy #000080 rgb(0,0,128) darkblue #00008B rgb(0,0,139) mediumblue #0000CD rgb(0,0,205) blue #0000FF rgb(0,0,255) royalblue #4169E1 rgb(65,105,225) blueviolet #8A2BE2 rgb(138,43,226) indigo #4B0082 rgb(75,0,130) darkslateblue #483D8B rgb(72,61,139) slateblue #6A5ACD rgb(106,90,205) mediumslateblue #7B68EE rgb(123,104,238) mediumpurple #9370DB rgb(147,112,219) darkmagenta #8B008B rgb(139,0,139) darkviolet #9400D3 rgb(148,0,211) darkorchid #9932CC rgb(153,50,204) mediumorchid #BA55D3 rgb(186,85,211) purple #800080 rgb(128,0,128) thistle #D8BFD8 rgb(216,191,216) plum #DDA0DD rgb(221,160,221) violet #EE82EE rgb(238,130,238) magenta / fuchsia #FF00FF rgb(255,0,255) orchid #DA70D6 rgb(218,112,214) mediumvioletred #C71585 rgb(199,21,133) palevioletred #DB7093 rgb(219,112,147) deeppink #FF1493 rgb(255,20,147) hotpink #FF69B4 rgb(255,105,180) lightpink #FFB6C1 rgb(255,182,193) pink #FFC0CB rgb(255,192,203) antiquewhite #FAEBD7 rgb(250,235,215) beige #F5F5DC rgb(245,245,220) bisque #FFE4C4 rgb(255,228,196) blanchedalmond #FFEBCD rgb(255,235,205) wheat #F5DEB3 rgb(245,222,179) cornsilk #FFF8DC rgb(255,248,220) lemonchiffon #FFFACD rgb(255,250,205) lightgoldenrodyellow #FAFAD2 rgb(250,250,210) lightyellow #FFFFE0 rgb(255,255,224) saddlebrown #8B4513 rgb(139,69,19) sienna #A0522D rgb(160,82,45) chocolate #D2691E rgb(210,105,30) peru #CD853F rgb(205,133,63) sandybrown #F4A460 rgb(244,164,96) burlywood #DEB887 rgb(222,184,135) tan #D2B48C rgb(210,180,140) rosybrown #BC8F8F rgb(188,143,143) moccasin #FFE4B5 rgb(255,228,181) navajowhite #FFDEAD rgb(255,222,173) peachpuff #FFDAB9 rgb(255,218,185) mistyrose #FFE4E1 rgb(255,228,225) lavenderblush #FFF0F5 rgb(255,240,245) linen #FAF0E6 rgb(250,240,230) oldlace #FDF5E6 rgb(253,245,230) papayawhip #FFEFD5 rgb(255,239,213) seashell #FFF5EE rgb(255,245,238) mintcream #F5FFFA rgb(245,255,250) slategray #708090 rgb(112,128,144) lightslategray #778899 rgb(119,136,153) lightsteelblue #B0C4DE rgb(176,196,222) lavender #E6E6FA rgb(230,230,250) floralwhite #FFFAF0 rgb(255,250,240) aliceblue #F0F8FF rgb(240,248,255) ghostwhite #F8F8FF rgb(248,248,255) honeydew #F0FFF0 rgb(240,255,240) ivory #FFFFF0 rgb(255,255,240) azure #F0FFFF rgb(240,255,255) snow #FFFAFA rgb(255,250,250) black #000000 rgb(0,0,0) dimgray / dimgrey #696969 rgb(105,105,105) gray / grey #808080 rgb(128,128,128) darkgray / darkgrey #A9A9A9 rgb(169,169,169) silver #C0C0C0 rgb(192,192,192) lightgray / lightgrey #D3D3D3 rgb(211,211,211) gainsboro #DCDCDC rgb(220,220,220) whitesmoke #F5F5F5 rgb(245,245,245) white #FFFFFF rgb(255,255,255)
.
-
Unit and Lesson Plans
The art of Self Discipline
M2 S1 Website HTML.
SA – NGUAN YING SCHOOL ENGLISH PROGRAM (SYEP)
Lesson Plan Period: 20
Unit: Computing Topic: Computing;
Course Code: 22181 Course Title:_Web Design
Matayom Suksa: M2
M1 S1 Overview.
Unit lesson plans are based on each section on the website and the finished product.
A section will be taught at the start of a lesson and built on in 4 minute comments during the lesson while students work on project.Terminal Objective
Students will demonstrate an understanding of website code for a single page.
Students will be able to demonstrate 'styles'.
Students will understand time management with technology usage.
Students will demonstrate an understanding of the use of attributes in styles.
Students will demonstrate an ability to link several pages together to form a website.
Students will create a website using a text programe like Kate, Textedit or Notepad.
Students will learn the use of 3 differrent types of color codes.
Students will learn and use several different types of html containers.Content:
Setup software for ascii text.
Setup a website folder to use for the project.
Add images folder to the main website folder.
Use the text editor to create the html layout for a home page.
Learn basic html code styles and attributes.
Learn about anchor tags and image tags and their use.
Learn about the 3 main types of color codes used for HTML codingPresentation of content
All work is submitted on line for assessment, therebye keeping a permanent record of assessments
Students can reattempt work if their score is under 75%.
Students websites will be posted on brettwilkin.com.Practice Activities:
Discussion, quizzes view html pages on brettwilkin.com.Production:
Complete quizzes on line. Create website on computer using resources from brettwilkin.com.
Zip main website folder and send to Brettwilkin on brettwilkin.com.
Publish websites on the internet.Homework / Assignments:
Complete on-line quizzes
Any work not completed in lesson time is to be completed for homework.
Learn vocabulary.
It is expected the vocabulary will be regular use by the end of the semester.(not the unit)Teaching Material / Aids:
Evaluation
On-line Quizzes
Attendance and participation.
A website with 5 pages.Evaluation Points
800 PointsResults
converted to 100%Philosophy
Computing is used to create an holistic approach to learning by working with Social studies, Public speaking and Science.
To support subjects, specific software is taught so students can complete high quality presentations.
The emphasis is on using the computer as a tool for creating, researching and expressing learning from many different areas. The ultimate goal is for the students to be able to take control of their learning, understand what is good research and express this in acceptable high quality formats.
'Student centered classrooms' that are also a 'flipped classroom' are the preferred methods of delivery. The website for the flipped classroom is brettwilkin.com. The flipped classroom frees the teacher to work with the students more often
Students use the website to review what is taught in class and revise for exams. The site logs show students often want to work late at night to finish quizzes and submit work.
Being an ESL classroom all new words on the web site are linked to a Thai dictionary. The site dictionary gives the meanings of the words in the context of how they are being used on the site.
Small quizzes to support learning and cater to the curriculum requirements are done on line via the students personal accounts.
This means most of the feedback is instant.
A 'Constructivist' approach is based on project activities and their outcomes. To this end the website is updated regularly to accommodate changing social attitudes, student brain dominances and learning styles.
There is a strong emphasis on creative thinking, research skill and looking for answers rather than being spoon fed. - https://brettwilkin.com/teachingobservations/spoon-feeding-students -.
As this is an ESL classroom students can review any information they do not understand.
It is noted according to the website logs students often log on to do quizzes late at night when they are of the feeling to work.Teaching Report:
Review 2021 Students enjoyed the work. The color charts were upgraded on the website due to internet ones not being good. Students enjoye the work and liked seeing their work on the internet.
Review 2023
So far students are engaged and learning to read rubrics for assessment and writing for understanding and expressing research.
Signature:
Robert BRETT WILKIN.
Date: __/__/____
.
.
.
.
.
.
-