Skip to content

Commit ee241be

Browse files
pycopathpycopath
authored
Add files via upload
1 parent cba79a7 commit ee241be

12 files changed

Lines changed: 271 additions & 0 deletions

File tree

‎HTML-Projects/a1/img/img1.jpg‎

3.15 MB
Loading

‎HTML-Projects/a1/img/img2.jpg‎

28.8 KB
Loading

‎HTML-Projects/a1/img/img3.jpg‎

28.4 KB
Loading

‎HTML-Projects/a1/index.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>Jonathan's Introduction</title>
6+
<h1>About Me</h1>
7+
</head>
8+
9+
<body>
10+
11+
<p>My name is Jonathan Morales. I am a computer science student at North Carolina A&T State University set to graduate in Spring 2027.<br></br>
12+
I like to watch movies, mess with cars, and learn about cybersecurity. I am particularly interested in hacking.</p>
13+
14+
<img src="img/img1.jpg" alt="Jonathan Morales" height="200">
15+
<p> I am currently taking 6 classes and a Lab, amounting to 17 credit hours</p>
16+
17+
<dl>
18+
<dt>COMP200</dt>
19+
<dd>Computer Science Sophomore Colloquium [1cr]</dd>
20+
21+
<dt>COMP322</dt>
22+
<dd>Internet Systems [3cr]</dd>
23+
24+
<dt>COMP365</dt>
25+
<dd>AI & Machine Learning [3cr]</dd>
26+
27+
<dt>COMP410</dt>
28+
<dd>Software Engineering [3cr]</dd>
29+
30+
<dt>CHEM107</dt>
31+
<dd>General Chemistry VII [3cr]</dd>
32+
33+
<dt>CHEM117</dt>
34+
<dd>General Chemistry VII Lab [1cr]</dd>
35+
</dl>
36+
37+
<a href="introduction.html">Introduction</a>
38+
<a href="../a2/little_prince.html">The Little Prince</a>
39+
</body>
40+
41+
</html>

‎HTML-Projects/a1/introduction.html‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Jonathan's Introduction</title>
5+
</head>
6+
7+
<style>
8+
th{
9+
border: 3px solid brown;
10+
padding: 4px;
11+
}
12+
tr, td {
13+
border: 2px solid darkgoldenrod;
14+
padding: 4px;
15+
text-align-last:;
16+
}
17+
</style>
18+
19+
<body>
20+
<table border="1">
21+
22+
<tr>
23+
<th> Skills </th>
24+
<td> Python </td>
25+
<td> C++ </td>
26+
<td> Cybersecurity Fundementals </td>
27+
<td> Working on cars </td>
28+
</tr>
29+
30+
<tr>
31+
<th> Abilities </th>
32+
<td> Problem Solving </td>
33+
<td> Critical Thinking </td>
34+
<td> Project Development </td>
35+
</tr>
36+
37+
<tr>
38+
<th> Education </th>
39+
<td> NCA&T SU Computer Science C/O '27 </td>
40+
<td> CompTIA Security+ </td>
41+
<td> The Wilson Academy Salutatorian</td>
42+
</tr>
43+
44+
<tr>
45+
<th> Training </th>
46+
<td> No professional training </td>
47+
</tr>
48+
</table>
49+
50+
<div>
51+
<img src="img/img2.jpg" alt="Car Image" height="200">
52+
<img src="img/img3.jpg" alt="My school" height="200">
53+
</div>
54+
<a href="index.html">Back to Home Page</a>
55+
</body>
56+
57+
</html>

‎HTML-Projects/a2/little_prince.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>The Little Prince</title>
5+
<link rel="stylesheet" type="text/css" href="littleprincestyle.css">
6+
</head>
7+
8+
<img src="./littleprince.jpg" alt="The Little Prince" width="350">
9+
<div>
10+
<p>As the little prince dropped off to sleep, I took him in my arms and set out walking once more.
11+
<span class="underline">I felt deeply moved, and stirred. It seemed to me that I was carrying a very fragile treasure.</span>
12+
<span class="highlight">It seemed to me, even, that there was nothing more fragile on all Earth.</span>
13+
In the moonlight I looked at his pale forehead, his closed eyes, his locks of hair that trembled in the wind, and I said to myself:
14+
<span class="quote">"What I see here is nothing but a shell. What is most important is invisible...</span>
15+
As his lips opened slightly with the suspicion of a half-smile, I said to myself again:
16+
<span class="quote">"What moves me so deeply, about this little prince who is sleeping here, is his loyalty to a flower--the image of a rose that shines through his whole being like the flame of a lamp, even when he is asleep..."</span>
17+
And I delt him to be more fragile still.
18+
<span class="underline">I felt the need of protecting him, as if he himself were a flame that might be extinguished by a little puff of wind...</span>
19+
</p>
20+
</div>
21+
<a href="../a1/index.html">Back to Introduction</a>
22+
23+
</html>

‎HTML-Projects/a2/littleprince.jpg‎

264 KB
Loading

‎HTML-Projects/a2/littleprincestyle.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
p {
2+
width:350px;
3+
text-align:left;
4+
font-family:'Times New Roman';
5+
font-size:16px;
6+
color:black;
7+
}
8+
.underline {
9+
text-decoration: underline;
10+
}
11+
.highlight {
12+
background-color: orange;
13+
}
14+
.quote {
15+
font-weight: bold;
16+
color:red;
17+
}
18+
a:link {
19+
color:blue;
20+
}
21+
a:visited {
22+
color:rgb(214, 10, 214);
23+
}
24+
a:hover {
25+
color:orange;
26+
}

‎HTML-Projects/comp322.html‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<html>
2+
3+
<head>
4+
<title>Internet Systems Course</title>
5+
<style>
6+
p{
7+
border: 1px solid black;
8+
height: 50px;
9+
max-width: 300;
10+
}
11+
12+
</style>
13+
</head>
14+
15+
<body>
16+
17+
<h1>Welcome to COMP322</h1>
18+
<p>HTML means <span style="color:red; background-color: yellow;">Hyper Text Markup Language</span></p>
19+
<div style="color:blue; font-size:16px; background-color:bisque;">
20+
<h2>Links</h2>
21+
<a href="http://www.google.com" target="_blank">Example Link</a>
22+
</div>
23+
<style>
24+
div li {
25+
color: darkolivegreen;
26+
}
27+
</style>
28+
<div>
29+
<h2>Lists</h2>
30+
<h3>Ordered List</h3>
31+
<ol start="1">
32+
<li>First item</li>
33+
<li>Second item</li>
34+
<li>Third item</li>
35+
</ol>
36+
<h3>Unordered List</h3>
37+
<ul>
38+
<li>First item</li>
39+
<li>Second item</li>
40+
<li>Third item</li>
41+
</ul>
42+
<h3>Definition List</h3>
43+
<dl>
44+
<dt>HTML</dt>
45+
<dd>Hyper Text Markup Language</dd>
46+
<dt>CSS</dt>
47+
<dd>Cascading Style Sheets</dd>
48+
<dt>JS</dt>
49+
<dd>JavaScript</dd>
50+
</div>
51+
52+
<div>
53+
<h2>Table Example</h2>
54+
<table border="5" bordercolor="beige">
55+
<tr bgcolor="lightgrey">
56+
<th colspan="5">Student Information</th>
57+
</tr>
58+
<tr bgcolor="orange", style="color:white;">
59+
<th>Class</th>
60+
<th>Student</th>
61+
<th>Grade</th>
62+
<th>Gender</th>
63+
</tr>
64+
<tr>
65+
<td rowspan="4">COMP322 </td>
66+
<td>Bob</td>
67+
<td>86</td>
68+
<td style="color:blue">M</td>
69+
</tr>
70+
<tr>
71+
<td>Joe</td>
72+
<td>93</td>
73+
<td style="color:blue">M</td>
74+
</tr>
75+
<tr>
76+
<td>Alice</td>
77+
<td>69</td>
78+
<td style="color:hotpink">F</td>
79+
</table>
80+
</div>
81+
<br>
82+
<img src="./testpic.jpg" alt="single turbo n54" width="300" height="200">
83+
84+
<p>
85+
This is a paragraph with a border and margin applied using internal CSS.
86+
</p>
87+
</body>
88+
89+
</html>
90+
91+
<!--attribute tags give extra information about an element. For example, the <a> tag uses the href attribute to specify the URL of the page the link goes to. In this case, the href attribute is set to "http://www.google.com", which means that clicking on the link will take you to Google's homepage. The target attribute is set to "_blank", which means that the link will open in a new tab or window when clicked.
92+
The <h1> tag defines a top-level heading, h2 defines a second-level heading, h3 defines a third-level heading, and so on. Headings are used to structure the content of a webpage and make it easier to read.
93+
<p> defines a paragraph of text. you can use <span> to style a portion of text within a paragraph.
94+
target="_blank" specifies that the link should open in a new tab or window.
95+
divisions or sections in an HTML document. They are used to group together related elements and apply styles or scripts to them as a whole.
96+
for example, you might use a <div> to group together a header, navigation menu, and main content area on a webpage.
97+
style="color" is an inline CSS style that sets the text color of an element. For example, <p style="color:blue;">
98+
the list tag is used to create lists in HTML. There are a few types of lists: ordered lists (<ol>), unordered lists (<ul>), and definition lists (<dl>).
99+
An ordered list (<ol>) is a numbered list, while an unordered list (<ul>) is a bulleted list. A definition list (<dl>) is used to define terms and their definitions.
100+
101+
102+
IMAGES: Images have 4 main attributes, src, alt, width, height
103+
src: specifies the path to the image file
104+
alt: provides alternative text for the image if it cannot be displayed
105+
width and height: specify the dimensions of the image in pixels or as a percentage of the containing element.
106+
107+
tables are created using the <table> tag, with rows defined by the <tr> tag and cells defined by the <td> tag. You can also use the <th> tag to define header cells in a table.
108+
individual <style> tags can be used to apply CSS styles directly to an HTML element. For example, you might use a <style> tag to set the font size or color of a specific paragraph or heading.
109+
these can also be created in a .css file and linked to the HTML document using the <link rel="stylesheet" type="text/css" href="[fil].css"> tag in the <head> section.

‎HTML-Projects/ncat.jpg‎

28.4 KB
Loading

0 commit comments

Comments
 (0)