Basic HTML for Web Design : Web Design Alt Text

나는 이미지를위한 대체 텍스트에 대해 이야기하기 위해 약간의 시간을 갖고 싶다 그리고 이것들은 정말로 중요하다

많은 브라우저가 사람들이 설정할 수없는 이미지 나 설정을 표시하지 않기 때문에 이미지를 표시하고 이미지에 텍스트가 있으면 그들에게 우리가 바로 여기에이 로고 살펴 보겠습니다 것을 놓칠 수 있기를 원하고 나는이 없습니다 죄송합니다 샘플 로고입니다 이미지 파일과 비슷하지 않습니다 당신이 알고있는보고있는 장애인은 그곳에 이미지가 있다는 것을 볼 수 없었습니다 샘플 로고는 대체 텍스트 또는 대체 텍스트를 추가하려고합니다

그래서 우리는 간다 여기서 이미지가 바로 여기에 jpeg와 같은 샘플을 가진 이미지 소스가 있습니다 그리고 우리 대체 텍스트를 추가하고 싶습니다 그래서 우리는 단어 alt를 문자 alt equals에 입력 한 다음 인용문을 입력합니다 마크를 추가하고 샘플 로고를 추가하고 싶습니다

그래서 그들은 그 이미지가 실제로 샘플이라는 것을 압니다 심벌 마크 그리고 그들이 독서와 같은 것을 가지고 있다면, 당신은 그것을 알고 있습니다 로고와 함께 시작한다고 말할 수있는 페이지가 있습니다 샘플 로고를 입력 한 다음 텍스트로 이동하십시오

그리고 당신은 텍스트가 거기에 있음을 볼 수는 없지만 if 우리는 빈 공간 대신 ​​이미지를 숨기려고했습니다 html 텍스트 샘플 로고

Basic HTML for Web Design : Right & Center Align Horizontal Rules in HTML

이제 수평 규칙을 왼쪽에 정렬하는 방법을 보여 줬습니다 그러나 그것은 정말로 귀하의 웹 페이지의 오른쪽에도 쉽게 할 수 있습니다

유일한 차이점은 해야 할 일은 수평 규칙에서 왼쪽으로 정렬하도록 설정 한 것입니다 왼쪽에서 오른쪽으로 맞 춥니 다 저장하면이 페이지가 새로 고침됩니다 그리고, 이제 보여줍니다 페이지의 오른쪽에있는 여기에 있습니다

이제 기본값으로 되돌리려면 align 속성을 모두 가져 오거나 센터로 정의 할 수 있으므로 알 수 있습니다 중앙 정렬됩니다 그래서 나는 그것을 구할 것이다 나는 그것을 다시 볼 것이고 그것은해야한다 중심에 서십시오

Basic HTML for Web Design : Setting Fonts in HTML

이제 전체 웹 페이지의 글꼴을 정의하는 것이 매우 쉬울 것입니다 이미 가지고있는 "GO (진행)"버튼에서 내 로고와 일치하는 좋은 산 셰리프를 선택하십시오

과 그래서 나는 나의 페이지의 맨 꼭대기에 여기 올라갈 것이고, 나는 나의 머리글과 나의 이미지를 가지고있다 여기, 나는 첫번째 이미지 다음에, 정말로 첫 번째 텍스트에 이르기를 원한다 이리 그리고 여기에서 필자는 글꼴 서체를 정의 할 것입니다 그래서 나는 여기에 들어가서 할거야

font face = "helvitica, arial", 그리고 나는 페이지의 맨 아래로 갈 것입니다 그 태그를 닫으려고 우리는 / 폰트를 작성하고 저장합니다 그러면 여기를 새로 고칩니다 이미 완료되었습니다

이 모든 본문은 이제 산 세리프가되어 약간 일치합니다 좋아, 그래서 좋아 보인다

Basic HTML for Web Design : Web Design Background Image Creation

이제 웹 사이트에 배경 이미지를 넣기 위해 노력할 것입니다 그러나 우리가 그렇게하기 전에, PhotoShop에서 실제로 배경 이미지를 만들겠습니다

이 기회를 활용하겠습니다 파일 크기와 RGB 스펙트럼 및 기타 필요한 것들에 관해서 이미지를 웹에 업로드하는 동안 명심하십시오 그래서 우리는 시작할 것입니다 나는 새 문서를 만들거야 그것을 백 픽셀로 100 개 만들자

그래서 그건 너비와 높이 그리고 여기서 우리는 결의안을 볼 것입니다 그리고 몇 가지가 있습니다 이미지의 해상도를 확인할 수있는 여러 가지 방법 그러나 웹 사이트의 표준은 1 인치당 72 픽셀 또는 PPI가 있습니다

실제로, 실제로는 매우 작습니다 다른 이미지 파일로 그러나 인터넷에서 볼 수 있기 때문에 실제로는 볼 수 없습니다 텔 그것은 단지 컴퓨터 화면에 있습니다

너도 알다시피, 이걸 인쇄하면된다 모든 것이 고르지 않게 보일 때 픽셀을 볼 수 있습니다 그리고 나서 컬러 모드에서 인쇄용 CNYK와는 대조적으로 RGB가되도록 할 것입니다 과 그레이 스케일이되기를 원한다면 그레이 스케일이 될 수도 있지만, 우리는 단지 할 것입니다 지금 당장 RGB

나는이 파일을 만들고 내 배경 이미지를 말할 것입니다 나는 희미한 노란색 폴카 도트를 원한다고 말할 것입니다 그래서, 그냥 던지기 만 할거야 이게 당신을 위해 정말 빠릅니다 그리고 거기에 노란색 폴카 도트가 있습니다

그거야 내 배경 이미지로

Basic HTML for Web Design : Change Single Text Color in HTML

그래서 우리는 우리의 기본적인 텍스트 색상을 꽤 많이 가지고 있고 우리의 활성 색상과 방문한 링크 및 기타 링크 이제 한 단어 만 바꾸고 싶다고 가정 해 봅시다 단락의 텍스트 색상 그리고 그렇게하기 위해 우리는 들어갈 것입니다 – 그래서 우리는 온 몸을가집니다

텍스트를 검정색으로 설정하면 문서의 모든 텍스트가 표시되지만 그렇지 않습니다 의미심장 한 것이 아닙니다 여기 두 번째 단락에서 두 번째 줄을 말하자 우리는 그 문장을위한 글꼴의 색깔을 바꾸고 싶다 그래서 우리는 여기에 들어가서 윗줄, 꺽쇠 괄호, 글꼴, 공백, 색, 인용 부호 및 글꼴 색상을 입력하십시오

우리는 원한다 ff0033을 한 다음 다른 인용 부호와 꺽쇠 괄호를 사용하겠습니다 그리고 나서 우리가되고 싶은 문장 (붉은 색), 그래서 빨간색 문장 뒤에, 우리는 다른 꺽쇠 괄호를 사용하고, / font로 그 태그를 닫을 것입니다 우리는 간다 그리고 우리는 그것을 살릴 것이고, 우리는 텍스트로 가서 미리 볼 것입니다

그리고 여기 두 번째 단락에서 두 번째 줄에 해당 텍스트가 빨간색으로 변경되었습니다 그리고 너 한 글자, 한 단어 또는 한 번에 단락으로이 작업을 수행 할 수 있습니다 당신이 컨테이너 사이에 가지고있는 것

Basic HTML for Web Design : Removing Image Borders in HTML

이제 우리는 색상과 이미지에 대해 조금 알았습니다 우리는 다시 버튼을 링크로 사용할 때 이전에 만든 버튼 그래픽 텍스트

그리고 기억한다면 주변에 정말 추한 경계가있었습니다 어떤 디자인에서는 괜찮 았지만,이 버튼은 정확하지 않았습니다 그리고 만약 당신이 바로 여기 보이는, 너는 내 단추, 내 링크 색을 분홍색으로 바꿨다 이제 경계선이 버튼이 분홍색으로 변했습니다 그래서, 제가하고 싶은 것은이 링크에 들어가서 그냥 제거하는 것입니다

그 국경의 그리고 우리가 여기에 들어가면 바로 링크 자체에 대한 제 텍스트가 있습니다 링크가있는 AA thref이고 이미지 소스가 있습니다 그리고 우리가 이미지 안에 들어가면 소스 브래킷, 실제 이미지 바로 다음에 border라는 단어를 입력하십시오 과 그것이하는 일은 경계가 얼마나 넓어야 하는지를 알려주는 것입니다

그리고 우리는 0으로 설정하면 테두리가 없어야합니다 그래서 우리는 그것을 구할 것입니다 다시 여기로 들어가서 새로 고침하고 경계선이 사라진 것을 보아라

Basic HTML for Web Design : Web Design File Organization

앞으로 더 나아 가기 전에 파일을 정리하는 방법에 대해 이야기 할 것입니다 특정 위치에 업로드하는 것이 매우 중요합니다

업로드 할 때 웹 사이트에, 당신은 그것을 가지지 않고 완벽하게 갈 수 있기를 원합니다 링크 나 이미지 파일 등을 다시 링크하십시오 그리고 맞아 이제 파일이 "샘플 웹 사이트"로 바탕 화면에 저장됩니다 새 폴더를 만들겠습니다

또한 "샘플 웹 사이트"라고도합니다 그리고 파일 이름을 만들 때 항상 기억하고 싶습니다 오, 나는 그것을 할 수 없다고 생각한다 우리는 이것을 "샘플 웹 사이트 폴더"라고 부를 것이지만 기억하고 싶습니다 HTML에있을 파일의 파일 이름을 만들 때 이미지 파일 또는 실제 HTML 파일 자체에 공백이나 브라우저를 사용할 수 없습니다

그것을 인식하지 못합니다 이제 "샘플"을 "샘플 폴더"라고하겠습니다 그럼 우리가 열거야 이것으로 내 웹 사이트를 끌어 들일 수 있습니다 이제 샘플 웹 사이트가 있고 미리로드 된 파일이 있습니다

이 웹 사이트에서 사용할 이미지 그래서 내가 원하는 파일에 추가하기 전에 그들이 실제로 올바른 장소에 있는지 확인하십시오 그래서 저기, 저것이 있습니다 여기에서 우리는 계속 일할 것입니다

Basic HTML for Web Design : Vertical Align Tables in HTML

이제 테이블 정렬 너비와 높이를 텍스트 정렬로 조정할 수있게되었습니다 세포 안에

그러기 위해서 나는 첫 번째 세포로 갈거야 내 첫 번째 콘텐츠 및 그 테이블 열은 이미 거기에있는 td를 수행 할 것이고, 아래와 같은 것을 정렬 할 것입니다 인용문 다음에, 색상이 정의 된 후에, 나는 align equals를 할 것입니다 상단

이제는 기본값으로 설정되므로 우리는 그 모양이 무엇인지 이미 알고 있으므로 저장합니다 그리고 그것을 새로 고칩니다 나는 그것을 실제로 저장한다 내 테이블 열 셀에 들어가서 그것은 td를 할 것입니다 td를 할 것입니다

v 수직 정렬은 따옴표와 같습니다 최고 끝 따옴표 그리고 그 다음에 나는 다시 바닥을 재편성 할 것이다 저장하십시오 보시 다시 여기로 가세요 기본 설정은 중앙이지만 선택하면 하단 또는 상단에 정렬 할 수 있습니다

Basic HTML for Web Design : Paragraph Alignments in HTML

이제 정렬에 대해 이야기 할 것입니다 그리고 우리를 시작하려면 우리는 단락 정렬

그렇게하기 위해 우리는 텍스트 페이지에 들어갈 것입니다 그리고 우리는 모두 준비했습니다 여기에 정의 된 단락이 있습니다 그리고 저는이 수평 적 규칙을 제거 할 것입니다 우리에게 줘

나는 모든 것을 깨끗하게하려고합니다 따라서 여기에는 순서가 지정된 목록의 두 단락이 있습니다 이제는 단락이있을 때마다 기본값이 자동으로 왼쪽으로 정렬됩니다 처럼 우린 여기 있습니다 그러나 palign 기능을 사용하면 쉽게 바로 정렬 할 수 있습니다

그래서 예를 들어, 우리는이 절에서 palign = right를 할 것입니다 다음 단락에서 우리는 할 것 같아, 알았어, 나는 맞춰서 맞춤법을 쓰지 않았다 두 번째 단락에서 우리는 palign = center 할거야 그리고 저는이 단락을 실제로 닫고 싶습니다 그냥 혼란스럽지 않습니다

그래서이 태그에 종료 태그를 추가하면 닫을 수 있습니다 이것도 올려라 그리고 우리는 그것을 구할 것입니다 그리고 우리는 여기서 새로 고칠 것입니다 그리고 모든 것이 친절 하긴하지만 밖으로 만들기가 힘들어,이 하나는 왼쪽 정렬됩니다

이곳은 중심에 정렬되어 있습니다 이 하나는 여기에 맞춰져 있습니다

Basic HTML for Web Design : Hexadecimal Colors in Web Design

이제 우리는 더 이상 나아 가기 전에 웹 안전 색상에 대해 배우게 될 것입니다 그리고 그 물건 웹 안전한 색상으로 보장되는 색상의 특정 세트가 있다는 것입니다

모든 웹 브라우저에서 그리고 이들은 16 진수 10 진수 스펙트럼에 있습니다 그래서 당신이 볼 때 이것들은 문자와 숫자가 섞여있는 6 자리 숫자 코드 뒤에 오는 숫자 기호가 될 것입니다 함께 그리고 저는 이것을 보여줄 수있는 가장 좋은 방법은 실제로 사진관에 들어가는 것입니다, 왜냐하면 그들은 일종의 색을 보여주기 때문입니다

그리고, 만약에 내가 컬러 팔레트를 사용하고 색상 라이브러리를 선택하면 웹 색상을 선택할 수 있습니다 여기 (아마 여기 없다), 내 견본으로 가자, 그리고 여기 – 여기 우리가 간다, web 안전한 색상 그런 다음 여기를 보시면 모든 웹 사이트 색상이 표시되며 이것들은 장소 전체에서 사용되기 때문에 익숙해 보일 것입니다 그런 다음 클릭합니다 여기, 우리는 여기에 내려 간다

그리고 이것은 그들이 당신에게 말하는 곳이다 숫자는이다 그리고 웹 사이트의 숫자 코드, 16 진수 코드는 항상 숫자입니다 기호 다음에 해당 문자를 입력하십시오 그리고 당신이 그것을 옮길 때 당신은 볼 수

그리고 항상 6 자릿수가 될 것이며, 항상 숫자가 될 것입니다 그리고 그것은 검정이 0000처럼 모든 숫자가 될 수 있지만, 반면에 흰색은 fffff이고, f 또는 여하튼, 여섯 개 f 그래서 그것들은 당신이 항상 기억할 수있는 아주 쉬운 두 가지, 즉 검은 색입니다 그냥 0이고 흰색은 그냥 f입니다