Activities for PART-1 Activity-1 (creating index.html: 40 points) [Approach-4 is recommended for this assignment] 1. Sta
Posted: Mon Jun 06, 2022 1:54 pm
Activities for PART-1
Activity-1 (creating index.html: 40 points) [Approach-4 is
recommended for this assignment]
1. Start with HTML-5 Doctype declaration
2. Declare the Charset (html5).
3. Include appropriate title (e.g. UNCP-ACM Student Chapter).
4. Include external CSS theme link (call it theme1.css). This file
will be created in Activity-2.
5. Include Bootstrap declarations (if you are using).
6. Include the structures for header, columns, boxes and footer and
save index.html.
Incrementally include these
structures, and check the layouts (open index.html on a
browser)
(in order to check the layout,
you need to complete Activity 2- step 2 at least)
7. The header section should include logo (floats left)
8. The navigation division should be placed below the header
section. The last navigational link should
float right.
9. The top right box includes a login form.
a. Both fields username and passwords should be set as
‘required’
b. The password type should be used.
c. The link for registering a new member should open the
registration form (register.html- see
image 4) in a new window. This file will be created in
activity-4
10. The Mid box contains an image and an external link to a
video.
11. Image should be in the center, and include appropriate
alternate text
12. Other boxes, bottom-left, top-left, right-mid, and right bottom
all contains appropriate links and
images.
13. The footer section includes copyright information.
14. Include the headings and lines if necessary.
15. Include IDs or Class names, if necessary.
Activity-2 (creating theme1.css: 30 points) [Approach-4 is
recommended for this assignment]
1. Declare box-sizing property for all HTML elements
2. Declare styles for html5 elements such as header and
footer
3. Declare styles such as nav, and for all other
divisions.
4. Declare styles for other elements, such as img, headings,
rulers, etc.
5. Incrementally, check your implementation (open index.html on
a browser).
6. When you are satisfied, take a snap shot of the screen.
Activity-3(creating theme-2.css: 10 points) [Approach-4 is
recommended for this assignment]
1. Save theme1 and save another copy of this file as
theme2.css.
2. Change the old colors and fonts, that is, create a new
theme
3. On the index.html, change the external CSS link from theme1.css
to theme2.css.
4. Check the main page again, when you are satisfied take a
snapshot.
Activities for PART-2
Activity-4(creating register.html)
1. Start with HTML-5 Doctype declaration
2. Declare the Charset (html5).
3. Include appropriate title (e.g. UNCP-ACM Student Chapter).
4. Include CSS link (register.css created in Activity-5)
5. Include Bootstrap declarations (if you are using)
6. Wherever possible, use html5 form elements.
a. Email input should be email type, Telephone input should be
tel.
b. include place folders and patterns
7. Set all the fields as required.
8. Open your file in a browser, and if you are satisfied take a
snap shot.
Activity-5(creating register.css)
1. Include styles for
a. Field
b. Legend
c. Label
2. Include styles for other elements, if
necessary.
Recommended for Part-1: Download the html code from the site
below, under section Responsive Website
Layout, click “try-it-yourself”.
https://www.w3schools.com/css/css_website_layout.asp
Copy the code. Try to understand how the embedded CSS Styles and
HTML code works. Modify the CSS styles
and HTML code and check the effects. When you get the required
webpage, safe CSS styles and HTML code in
two different files and link the external CSS file in HTML file
UNC UNCP Computer Science UNCP ACM Student Chapter University of North Carolina at Pembroke Association for Computing Machinery - ACM More information on the UNCG club ACM is widely recognized as the premier membership organization for computing professionals delivering resources that advance computing as a science and a profession: enable professional development, and promote policies and research that benefit society. The purpose of the UNCG chapter is to promote an increased knowledge in computing and t applications, and to promote a means of communication between persons having interest in computing UNCP-ACM Student Chapter Soccer at Pembroke Read More Men's Soccer vs Belmont Abbey Highlights Home | Terms of use Contact Us PEMBROKE-NC (870) 521-6000 Copyright 2018 UNCP ACM NI Rights Reserved Programming Completions Member Login New Members Register Hara Usernam Password login Featured News ACM utachta K-12 UNCP ACMia On Facebook ACM Invited Talk-B Cales UNCP ACM-Free Starbucks Programming Completion is open Contact ACM Hack the UNCP Bank website and find the secret Gode NASA Certificate of Pan City of March Carla P For at
Activity-1 (creating index.html: 40 points) [Approach-4 is
recommended for this assignment]
1. Start with HTML-5 Doctype declaration
2. Declare the Charset (html5).
3. Include appropriate title (e.g. UNCP-ACM Student Chapter).
4. Include external CSS theme link (call it theme1.css). This file
will be created in Activity-2.
5. Include Bootstrap declarations (if you are using).
6. Include the structures for header, columns, boxes and footer and
save index.html.
Incrementally include these
structures, and check the layouts (open index.html on a
browser)
(in order to check the layout,
you need to complete Activity 2- step 2 at least)
7. The header section should include logo (floats left)
8. The navigation division should be placed below the header
section. The last navigational link should
float right.
9. The top right box includes a login form.
a. Both fields username and passwords should be set as
‘required’
b. The password type should be used.
c. The link for registering a new member should open the
registration form (register.html- see
image 4) in a new window. This file will be created in
activity-4
10. The Mid box contains an image and an external link to a
video.
11. Image should be in the center, and include appropriate
alternate text
12. Other boxes, bottom-left, top-left, right-mid, and right bottom
all contains appropriate links and
images.
13. The footer section includes copyright information.
14. Include the headings and lines if necessary.
15. Include IDs or Class names, if necessary.
Activity-2 (creating theme1.css: 30 points) [Approach-4 is
recommended for this assignment]
1. Declare box-sizing property for all HTML elements
2. Declare styles for html5 elements such as header and
footer
3. Declare styles such as nav, and for all other
divisions.
4. Declare styles for other elements, such as img, headings,
rulers, etc.
5. Incrementally, check your implementation (open index.html on
a browser).
6. When you are satisfied, take a snap shot of the screen.
Activity-3(creating theme-2.css: 10 points) [Approach-4 is
recommended for this assignment]
1. Save theme1 and save another copy of this file as
theme2.css.
2. Change the old colors and fonts, that is, create a new
theme
3. On the index.html, change the external CSS link from theme1.css
to theme2.css.
4. Check the main page again, when you are satisfied take a
snapshot.
Activities for PART-2
Activity-4(creating register.html)
1. Start with HTML-5 Doctype declaration
2. Declare the Charset (html5).
3. Include appropriate title (e.g. UNCP-ACM Student Chapter).
4. Include CSS link (register.css created in Activity-5)
5. Include Bootstrap declarations (if you are using)
6. Wherever possible, use html5 form elements.
a. Email input should be email type, Telephone input should be
tel.
b. include place folders and patterns
7. Set all the fields as required.
8. Open your file in a browser, and if you are satisfied take a
snap shot.
Activity-5(creating register.css)
1. Include styles for
a. Field
b. Legend
c. Label
2. Include styles for other elements, if
necessary.
Recommended for Part-1: Download the html code from the site
below, under section Responsive Website
Layout, click “try-it-yourself”.
https://www.w3schools.com/css/css_website_layout.asp
Copy the code. Try to understand how the embedded CSS Styles and
HTML code works. Modify the CSS styles
and HTML code and check the effects. When you get the required
webpage, safe CSS styles and HTML code in
two different files and link the external CSS file in HTML file
- Activities For Part 1 Activity 1 Creating Index Html 40 Points Approach 4 Is Recommended For This Assignment 1 Sta 1 (315.34 KiB) Viewed 29 times